Angular 17函数式Http拦截器重试请求失败问题求助

你的问题核心在于破坏了Observable的链式调用结构：在catchError里直接调用subscribe属于副作用操作，complete回调里的return next(reqCloned)无法被外层的pipe捕获，自然不会触发请求重试。同时你克隆请求时没有更新新的JWT令牌，即使重试也会因旧令牌失效再次失败。

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

export const ErrorInterceptorMethod: HttpInterceptorFn = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn,
) => {
  const loginService = inject(LoginService);
  // 假设你有存储令牌的服务，或者从loginService直接获取新令牌
  const authService = inject(AuthService);

  return next(req).pipe(
    catchError(error => {
      // 排除登录请求，避免无限循环
      if (error.status === 401 && req.url !== `${environment.urlApiAdmin}/login`) {
        // 用Observable链式操作替代subscribe，确保流能传递到外层
        return loginService.refreshToken().pipe(
          // 刷新成功后，更新请求头并重试原请求
          switchMap(() => {
            const newToken = authService.getToken();
            // 克隆请求并替换为新的JWT令牌
            const reqCloned = req.clone({
              setHeaders: {
                Authorization: `Bearer ${newToken}`
              }
            });
            console.log("Refresh done, retrying request:", reqCloned);
            return next(reqCloned);
          }),
          // 处理令牌刷新失败的情况
          catchError(refreshError => {
            console.error("Refresh token failed:", refreshError);
            loginService.logout();
            return throwError(() => refreshError);
          })
        );
      }

      if (error.status === 403) {
        console.log("403 Forbidden, logging out");
        loginService.logout();
      }

      // 其他错误直接抛出
      return throwError(() => error);
    })
  );
};

关键修正点说明 #

• 用switchMap替代subscribe：将令牌刷新的Observable流与重试请求的流串联，确保整个逻辑在Observable链中传递，catchError能正确接收并返回重试请求的结果。
• 更新请求头：克隆请求时必须替换为新获取的JWT令牌，否则重试请求依然会使用过期令牌导致再次401错误。
• 嵌套处理刷新失败：在refreshToken的pipe中添加catchError，专门处理令牌刷新失败的场景，执行登出并抛出错误。
• 保持链式结构：整个catchError返回的是一个Observable，完全符合HttpInterceptorFn的返回要求。

注意：需要确保loginService.refreshToken()方法在成功后，已经将新令牌更新到存储位置（比如localStorage或BehaviorSubject），这样authService.getToken()才能获取到有效令牌。

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