如何在令牌在 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(); . 完毕。