Angular HTTP拦截器中Firebase令牌刷新的then执行顺序异常问题

核心问题 #

你遇到的日志顺序异常，本质是Promise链式调用断裂——刷新令牌的异步操作没有被正确加入Promise链，导致重试请求的代码没等令牌刷新完成就直接执行了。

具体排查和修复步骤 #

1. 确保刷新令牌方法返回Promise
   你调用的Firebase刷新令牌逻辑（比如getIdToken(true)）本身是异步的，必须确保在拦截器里正确返回这个Promise。如果没返回，then链会跳过异步等待，直接执行后续代码。

2. 严格维护异步链的返回关系
   Angular HTTP拦截器基于RxJS，建议把Promise转成Observable来统一处理，避免混用导致的顺序问题。正确写法示例：

   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     return next.handle(request).pipe(
       catchError(error => {
         if (error.status === 401 || error.status === 0) {
           console.log('Attempting to refresh token now...');
           // 把Promise转成Observable，确保异步等待
           return from(this.authService.refreshToken()).pipe(
             switchMap(newToken => {
               console.log('Here is where the request will refresh');
               localStorage.setItem('token', newToken);
               // 克隆请求并更新令牌头
               const refreshedRequest = request.clone({
                 setHeaders: { Authorization: `Bearer ${newToken}` }
               });
               // 返回重新发送的请求
               return next.handle(refreshedRequest);
             })
           );
         }
         return throwError(() => error);
       })
     );
   }
   

3. 避免异步回调外执行依赖逻辑
   如果你之前的代码是在refreshToken().then()外面直接返回重试请求，必然会导致顺序错误——异步回调还没执行，重试就先跑了。比如这种错误写法：

   // 错误示例：重试请求未等待令牌刷新完成
   catch(error => {
     if (error.status === 401) {
       console.log('Attempting to refresh token now...');
       this.authService.refreshToken().then(newToken => {
         console.log('Here is where the request will refresh');
         // 更新令牌逻辑...
       });
       // 此处直接返回，未等待then回调完成
       return next.handle(request);
     }
     return throwError(error);
   })
   

验证 #

修复后控制台日志顺序应变为：

• Attempting to refresh token now...
• Here is where the request will refresh
• 重试请求的相关日志

若顺序符合预期，说明异步链已正确衔接，异步等待生效。

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