如何根据 jwt 令牌的到期时间戳自动注销？

Question

我希望应用程序根据到期令牌自动注销。

Angular 客户端代码：

login(credentials) {
    return this.http.post('http://something/api/login/',
      credentials)
      .map(response => {
        let result = response.json();
        if (result && result.token) {
          localStorage.setItem('token', result.token);
          return true;
        }
        return false;
      });
  }

由于令牌包含：

  "exp": 1526016179 // expiry time

我也许可以在具有<router-outlet></router-outlet> 的 app.component 中执行此操作：

ngOnInit() {
    let token = localStorage.getItem('token');
   timer:DateTime = new Date(_JwtHelper.decodeToken(token).exp);
    if (timer && (Date.now() > timer)) {
      logout();       
    }
  }

但是这种方法的问题是它不会自动注销。它需要用户进行某种活动，例如单击按钮以触发 ngOnInit() 或 app.component（我什至不确定它是否会在每次在网站上的任何位置单击按钮时触发，可能不会）。

应用程序应自动在到期时间到达后立即退出并重定向到登录页面。

Answer 1

使用计时器(setInterval) 倒计时，直到下一次 API 调用结束。如果当前时间大于会话到期时间，则注销。如果有任何新呼叫转到服务器，请重置计时器。

这可以作为一个单独的服务来处理，可以在 httpInterceptor 服务上调用。

Answer 2

要实现此用户必须在 UI 上执行操作。 我已经这样做了。但这仅在用户进行服务调用时才会发生。 我的系统调用的每一个服务都是通过这个方法调用的。

public makeHttpCall(url, options): Observable<any> {

    if (options.auth) {
      if (!options.headers) {
        const token = this.CurrentUser.token
        const headers = new Headers();
        headers.append('Access-Control-Allow-Origin', '*');
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', 'bearer ' + token);
        headers.append('UserName', this.CurrentUser.username);
        options.headers = headers;
      }
    }

    return this.http.request(url, options).map(this.extractData).catch(this.handleError.bind(this)).pipe(
      tap( 
        data => {}
        ,
        error => {}
      )
    );

}


private extractData(res: Response) {
    const body = res.json();
    return body || {};
}

private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
      if (error.status === 401 || error.status === 403) {
        // Here we can handle logout function of the system
        this.router.navigate(['logout']);

      }
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    return Observable.throw(errMsg);
 }

希望这对任何人都有帮助。