如何在令牌在 angular 中過期時重定向到注銷？

Question

我有一個 angular 13 申請。 在那里我使用 JWT 令牌進行身份驗證。 一切正常。 但是我給 JWT 令牌的令牌到期時間是 1 小時。 一旦令牌在服務器端過期，我想將用戶從前端應用程序中注銷。

我這樣做了，但似乎有問題並且對我不起作用：

export class authInterceptor implements HttpInterceptor {

  constructor(private userService: UserService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.userService.isAuthentificated()) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.userService.getToken()}`
        }
      });
    }
    return next.handle(request).pipe(
      tap(event => {
      }, error => {
        this.onSubscribeError(error);
      })
    );
  }

  private onSubscribeError(error: any): void {
    if (error.status === 401 || error.status === 403) {
      this.userService.logout();
    }
  }
}

誰能告訴我我做錯了什么並幫我改正？

Answer 1

E. Maggini 提供的鏈接在技術上很好，但接受的答案至少只與讓服務器決定它是否過期有關。

如果您沒有調用服務器並收到 401，您的 UI 將保持登錄狀態，直到您這樣做。

你需要兩者的結合； 一個添加到您的攔截器以檢查您的 401 並將您注銷（當然）並且應用程序本身檢查令牌。

最簡單的是在 go 上設置一個時間間隔來檢查您的令牌是否過期。

假設您有某種具有基本登錄/注銷處理功能的 singleton AuthService ...

@Injectable()
export class AuthService {
    private jwt: string;
    private expiryTimer: any;

    public login(jwt: string): void {
        this.jwt = jwt;
        this.expiryTimer = setInterval(() => { this.checkExpiry(); }, 60000);
        this.router.navigate(['...']);
    }

    public logout(): void {
        this.jwt = undefined;
        if (this.expiryTimer) clearInterval(this.expiryTimer);
        this.router.navigate(['...']);
    }

    private checkExpiry(): void {
        if (this.jwtService.hasExpired(this.jwt)) this.logout();
    }
}

假設您有一些 jwt 服務或方法或諸如此類的東西來檢查到期...

它看起來會比這更復雜，因為您可能實際上將令牌存儲在某個地方（本地存儲？）以便處理頁面刷新等。

但基礎知識就在那里——不要想太多，它就像每隔 x（1 米足夠好？）檢查一次令牌一樣簡單，如果它已過期，請注銷……

您修改后的攔截器將使用相同的東西； 得到一個 401？ this.authService.logout(); . 完畢。