Angular 17 - HttpInterceptorFn - 在更新令牌服务未完成时对 http 请求进行排队

Question

在 Angular 17 项目中，使用 HttpInterceptorFn，我在更新身份验证令牌时遇到了问题。事实上，当两个请求到达且两个请求的令牌已过期时，就会启动两个续订请求。令人担忧的是，第二个失败，因为续订令牌已被第二个修改。 因此，我想到设置一个等待队列，以接受当前令牌更新期间发生的请求。但我不知道如何管理等待队列中包含的请求的执行。 您知道我该如何处理这个案子吗？ 谢谢！

在 Angular 17 项目中，使用 HttpInterceptorFn，我希望在 Token 更新请求正在进行时将 HTTP 请求放入等待队列中，然后执行等待队列中的请求。

Answer 1

您应该保持刷新令牌请求挂起的状态，例如使用刷新完成后将发出的主题，然后当您捕获 401 并看到主题存在（这意味着刷新正在挂起）时，对于任何下一个请求，然后只需等待它并重试完成后：

let refreshingToken$: Subject<void> | null = null;

export const refreshTokenInterceptor: HttpInterceptorFn = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn
) => {
  const http = inject(HttpClient);

  return next(req).pipe(
    catchError((err) => {
      if (err.status === 401) {
        if (!refreshingToken$) {
          refreshingToken$ = new Subject<void>();
          http.get('/refresh').subscribe(() => {
            refreshingToken$!.next();
            refreshingToken$!.complete();
            refreshingToken$ = null;
          });
        }
        return refreshingToken$.pipe(switchMap(() => next(req)));
      }

      throw err;
    })
  );
};