HttpInterceptor 循环引用错误：记一场胜利

2024-01-02 14:13:45

使用 HttpInterceptor 的常见场景是实现基于 token 的验证机制。因为，在基于 token 的验证机制中，证明用户身份的 token 需要被附带在每一…

在 Angular 应用中，你会发现 HttpInterceptor 可以从一个请求的发起，一路追溯到它的终结。如果对 HttpInterceptor 的使用稍有不慎，我们就会遇到循环引用。

以这个犯错的代码为例：

// userService.ts
@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUserInfo() {
    return this.http.get('/user/info');
  }
}


// http.interceptor.ts
@Injectable()
export class HttpInterceptor implements HttpInterceptor {
  constructor(private userService: UserService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.userService.getUserInfo();
    const newReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`),
    });
    return next.handle(newReq);
  }
}

我们看看这个流程：

当 HttpInterceptor 被调用时，它尝试获取 userService。
UserService 尝试使用 HttpClient 发送一个请求来获取用户信息。
HttpClient 拦截了这个请求，并调用了 HttpInterceptor。

在这个过程中，HttpInterceptor 和 UserService 相互依赖，导致了循环引用。

如何避免循环引用？

解决这一错误的关键在于，分离 HttpInterceptor 和 UserService 的依赖关系。方法很简单：

把 HttpInterceptor 从 UserService 中移出，改成在根模块中直接提供。
HttpInterceptor 使用 Injector 来获取 UserService，这样就可以避免循环引用。

将 HttpInterceptor 改写如下：

@Injectable()
export class HttpInterceptor implements HttpInterceptor {
  constructor(private injector: Injector) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const userService = this.injector.get(UserService);
    const token = userService.getUserInfo();
    const newReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`),
    });
    return next.handle(newReq);
  }
}