使用 Angular 和 JWT 令牌持续登录

Posted 2023-03-10

【中文标题】使用 Angular 和 JWT 令牌持续登录

【英文标题】：Continous Login with Angular and JWT Token

【发布时间】：2021-07-02 21:49:21

【问题描述】：

我正在从后端获取访问令牌和刷新令牌。当 JWT 令牌过期时，它会给我错误“令牌已过期”和自定义错误代码“1002”。当令牌过期时，有一个 API 用于使用刷新令牌获取新的访问令牌。

假设，我正在调用一个 API 来获取用户详细信息，并且我收到错误令牌已过期。在这种情况下，如何调用刷新令牌 API 来获取新的访问令牌并再次获取用户详细信息 API 应该会被自动调用。

这些动作需要在后台处理。我可以在 http 拦截器处处理令牌过期错误。但是如何调用我收到令牌过期消息的相同 api。

假设如果在一页中有 2 个 api 调用并且对于它们两个我都收到过期错误。然后刷新令牌api只需要调用一次。

在这方面需要帮助才能在 Angular 上实现持续登录功能。

【参考方案1】：

我希望您将 jwt 令牌存储在前端，并且您可以访问令牌的到期时间。所以你不需要等待来自后端的错误。

triggerLogout(): void 
    const expiration = this.$jwt.getTokenExpirationDate();
    if (expiration !== null) 
      const timeout = expiration.valueOf() - new Date().valueOf();
      of(null)
        .pipe(delay(timeout))
        .subscribe(() => 
          // token expired 
          // call refresh token api or throw the active user to login
        );
    
  

在根组件的 ngOnInit() 中调用它。即使您刷新页面，它也会重新计算过期时间并订阅它直到超时。

如果你不喜欢它，你可以创建（或使用现有的）拦截器来捕获 UnAuthorized 状态并在那里调用刷新 api