javascript - 跨选项卡安排访问 token 刷新

Question

为了在我的 Angular 应用程序中对用户进行身份验证，我使用过期时间 X 秒的访问 token 和可用于将身份验证再延长 X 秒的刷新 token 。

所以流程是这样的:

用户登录。访问 token 和刷新 token 都存储在本地存储中

设置了一个计时器(比 X 秒短 5%)。

计时器完成后，会向服务器发送刷新 token 请求，并使用生成的(新)访问和刷新 token 更新本地存储。

我的问题是这样的:

如果我打开了多个选项卡，我将不可避免地遇到同时从多个选项卡触发刷新的情况。服务器将接受第一个请求，但抛出 400 Bad Request - Invalid refresh token对于后续请求，因为它认为它们已被使用。

有谁知道如何解决这个问题？如何跨标签/窗口同步事物？我有几个想法，但似乎都有些牵强:

如果响应是 400 Bad Request ，然后稍后重试(或检查是否已经有有效的更新 token )。

尝试通过在它们之间发布消息来跨选项卡同步服务器请求。

Answer 1

不要设置计时器，添加拦截器并捕获错误，如果出现 401 错误，请执行刷新 token 流程，然后使用新 token 重复失败的请求

intercept(request: HttpRequest<any>, next: HttpHandler): 
        Observable<HttpEvent<any>> {

return next.handle(request).pipe(
  catchError((error: HttpErrorResponse) => {
    if (error.status == 401) {
      return this.refreshToken(request, next);
     } 
    }
    return throwError(error);
  })
);


      private refreshingInProgress: boolean = false;
  private accessTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  private refreshToken(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.refreshingInProgress) {
      this.refreshingInProgress = true;
      this.accessTokenSubject.next(null);
      return this.authenticationService.refreshToken().pipe(
        switchMap((res: any) => {
          this.refreshingInProgress = false;
          this.accessTokenSubject.next(res);
          // repeat failed request with new token
          return next.handle(this.addToken(request, res));
        })
      );
    } else {
      // wait while getting new token
      return this.accessTokenSubject.pipe(
        filter((token) => token !== null),
        take(1),
        switchMap((token) => {
          // repeat failed request with new token
          return next.handle(this.addToken(request, token));
        })
      );
    }
  }
  
  private addToken(request: HttpRequest<any>, token: Credentials) {
    return request.clone({
      setHeaders: {
        Authorization: `Bearer ${token.access_token}`,
      },
    });
  }