Angular HttpInterceptor刷新token后未将新token应用至请求，需刷新页面才生效

当前的拦截器实现完全没有实现原请求重发的核心逻辑，是导致问题的根本原因，具体问题点：

• 错误捕获逻辑失效：在订阅错误回调的分支里，仅在刷新token的订阅回调中修改了request变量的内容，但修改完成后完全没有调用next.handle()把带新token的请求发出去，相当于只改了局部变量，没有触发实际的网络请求。
• 流的处理逻辑错误：手动通过AsyncSubject中转透传原请求的执行结果，没有在捕获401错误后，将整个请求流切换为“刷新token→重发原请求”的新链路，原请求返回的401错误会直接透传给业务调用方。
• 逻辑闭环缺失：刷新token拿到新token后，没有将新的请求执行结果返回到整个拦截器的返回流中，业务侧拿到的还是最开始原请求返回的401结果，自然无法正常请求。

为什么只有刷新页面后请求才能正常工作：页面刷新时，拦截器会重新读取localStorage里存储的新token，在请求发起初始就把token加到请求头里，此时的请求是独立的全新请求，和拦截器里未完成的重发逻辑没有关联。

核心调整方向：用RxJS的流操作符替代手动订阅的回调逻辑，在捕获401错误后，直接返回“先刷新token、再用新token重发原请求”的串联流，让整个流自动完成链路切换。
具体实现代码：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = localStorage.getItem(environment.TOKEN_NAME);
  // 初始请求携带当前本地存储的token
  const initialRequest = this.attachHeadersToRequest(request, token);

  return next.handle(initialRequest).pipe(
    catchError((error) => {
      // 非401的错误走全局错误处理，直接抛出
      if (!(error instanceof HttpErrorResponse) || error.status !== 401) {
        if (error instanceof HttpErrorResponse && error.status !== 404) {
          this.httpError.emit(error);
        }
        return throwError(() => error);
      }

      // 捕获到401：发起token刷新，刷新完成后自动重发原请求
      return this.tokenRefreshService.refreshToken().pipe(
        switchMap(() => {
          const newToken = localStorage.getItem(environment.TOKEN_NAME);
          // 用新token重新构造请求
          const retriedRequest = this.attachHeadersToRequest(request, newToken);
          // 发起重发请求，把结果返回给上游
          return next.handle(retriedRequest);
        }),
        // 刷新token本身失败时，直接抛出错误
        catchError(refreshError => throwError(() => refreshError))
      );
    })
  );
}

// 公共方法：统一给请求附加请求头逻辑
private attachHeadersToRequest(request: HttpRequest<any>, token: string): HttpRequest<any> {
  const headerMap: Record<string, string> = {};
  if (token) {
    headerMap['Authorization'] = `Bearer ${token}`;
  }
  // 附加全局自定义请求头
  Object.keys(AppHttpInterceptor.headers).forEach(headerKey => {
    // @ts-ignore
    if (AppHttpInterceptor.headers[headerKey]) {
      // @ts-ignore
      headerMap[headerKey] = AppHttpInterceptor.headers[headerKey];
    }
  });
  return request.clone({ setHeaders: headerMap });
}

• 增加并发锁机制：多个请求同时触发401时，只发起一次token刷新请求，其他请求等待刷新完成后统一重发，避免重复刷新导致的token失效问题。
• 增加循环拦截保护：如果重发的请求仍然返回401，直接抛出错误跳转登录页，避免陷入无限刷新token的循环。

内容的提问来源于stack exchange，提问作者Ojonugwa Jude Ochalifu