Angular 2+ HttpInterceptor：获取服务端令牌后再返回拦截函数

我懂你现在的困扰——你需要在HttpInterceptor里先从服务端拿到Bearer令牌，再把它附加到请求头里继续发送请求，但原来的代码因为异步操作的问题，导致请求在令牌获取完成前就发出去了，根本没带上正确的token对吧？

问题根源 #

你原来的代码里，this.auth.getToken().subscribe(...)是异步执行的，而return next.handle(request);会立刻执行。这就意味着，当请求被处理的时候，request还没被克隆加上Authorization头，自然无法正常携带令牌。

正确的解决方案 #

我们可以利用RxJS的操作符来处理这个异步流，switchMap就是最佳选择——它会等待getToken的Observable返回结果，再执行后续的请求处理逻辑。

下面是修正后的完整代码：

export class TokenInterceptor implements HttpInterceptor {
  constructor(private auth: AuthenticationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 用switchMap等待令牌获取完成，再处理请求
    return this.auth.getToken().pipe(
      switchMap(response => {
        const token = response['access_token'];
        // 克隆原始请求，添加Authorization头
        const authenticatedRequest = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
        // 返回带令牌的请求处理流
        return next.handle(authenticatedRequest);
      }),
      // 可选：添加令牌获取失败的错误处理
      catchError(error => {
        // 这里可以根据业务需求处理错误，比如跳转到登录页、提示用户等
        console.error('获取令牌失败:', error);
        return throwError(() => new Error('无法获取认证令牌'));
      })
    );
  }
}

为什么这样可行？ #

• pipe和switchMap会把令牌获取的异步流和请求处理的流串联起来，只有当getToken成功返回令牌后，才会执行请求克隆和后续的next.handle。
• 这种方式完全符合HttpInterceptor对返回Observable的要求，不会打破Angular的HTTP拦截器机制。

额外建议 #

如果你的AuthenticationService还没有做令牌缓存，建议加上——比如第一次获取令牌后把它存在内存或本地存储里，后续请求直接返回缓存的令牌，避免每次请求都去服务端重复获取，提升性能。

内容的提问来源于stack exchange，提问作者Sean Ivins