在不请求 API 的情况下检查令牌过期

Question

我开发了一个Angular Web 应用程序，我最近添加了一个 JWT 安全性，以确保请求由授权用户完成。

我的 JWT 实现非常简单；用户将自己连接到应用程序，在 POST 请求的主体响应中创建并返回一个令牌，然后此令牌及其到期日期由 Angular 应用程序存储在 LocalStorage 中。

按照课程、教程和所有帮助者将 JWT 集成到使用 NodeJS API 的 Angular 应用程序中，我发现就我所见，没有办法直接检查令牌的过期时间在 Angular 应用程序内部。

我试图通过订阅Subject 来想象一种方法，但是如何在到期时将新值应用于主题。

我还有一种方法可以知道以毫秒为单位的实际日期减去过期日期，但我真的不知道如何使用它来获得实时信息。

我想知道是否有办法在 API 中创建类似中间件的东西。但是为应用程序的整个方法做这件事可能真的很痛苦。

所以我需要的是在不发出 HTTP 请求的情况下获得过期信息。收到请求后，我将收到 401 错误，但无需执行任何请求即可完成某些操作。因此，如果令牌已过期，我不希望用户做任何事情。

Answer 1

对于在您登录或注销时发出的 observable，这里有一些东西可以帮助您入门。 setTimeout 不是很干净，但应该是一个很好的基础。

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  public authenticated$ = new BehaviorSubject<boolean>(false);
  private expirationTimeout: number | undefined;

  // Call when you authenticate with your JWT
  authenticate(jwt: string): void {
    this.authenticated$.next(true);

    const expiration = getJwtExpiration(jwt);
    const timeout = +expiration - +new Date();

    if (this.expirationTimeout !== undefined) {
        clearTimeout(this.expirationTimeout);
    }

    this.expirationTimeout = setTimeout(() => {
      this.authenticated$.next(false);
    }, timeout);
  }

  // Call when you log out
  logout() {
    if (this.expirationTimeout !== undefined) {
        clearTimeout(this.expirationTimeout);
        this.expirationTimeout = undefined;
    }
    this.authenticated$.next(false);
  }
}

@Component({
  template: `<span *ngIf="authService.authenticated$ | async">
    Only visible when authenticated
  </span>`
})
export class MyComponent {
  constructor(
    public authService: AuthenticationService
  ) {}
}