javascript - 拦截器在登录angular7应用程序后抛出错误？

Question

我有一个 angular7 应用程序，其中有多个模块和服务。我有 node.js 后端和 jwt 身份验证机制。当客户端 token 过期时，后端向客户端发送 405 错误响应。

现在在客户端，我实现了拦截器 来获取405 错误并重定向到登录。这是我的拦截器代码

intercept(request: HttpRequest<any>, next): Observable<HttpEvent<any>> {
    console.log(this.localCache.getToken(), 'token')
    return next.handle(request).pipe(
        tap(event => {
            if (event instanceof HttpResponse) {
                console.log('succeed');
            }
        }, error => {
            if (error.status == 405) {
                this.appService.navigateToView(Constants.VIEW_ROUTES.LOGIN);
                this.localCache.setTokeExpireErrorMsg('Session Expired');
            }
            return Observable.throw(error);
        })
    )
}

但是登录后，在我的仪表板上有 3 个 api 正在调用加载。但是当用户在登录后进入仪表板时，即使在我的本地存储 token 中，所有 api 都没有获得 token ，并且拦截也会抛出这样的错误

Answer 1

由于每次API调用都会经过拦截器，你可以检查token是否仍然有效，继续API调用

如果 token 过期，重定向到登录并阻止任何进一步的 API 调用。

像这样尝试:

intercept(req, next) {
    var token = this.sessionService.getToken();
    if (token == null && this.sessionService.isTokenExpired()) {
      this.sessionService.logOut()
      toastr.warning("Session Timed Out! Please Login");
      this.router.navigate(['/login'])
      return throwError("Session Timed Out")
    });
} else {

  return next.handle(req).catch(err => {
    console.log(err);
    if (err.status === 405) {
      console.log('in if')
      localStorage.clear();
      this.appService.navigateToView(Constants.VIEW_ROUTES.LOGIN)
      this.localCache.setTokeExpireErrorMsg('Session has expired, please login agian')
    }
    return Observable.throw(err);
  }
}

session 服务.ts

  getToken(): string {
    return localStorage.getItem('userToken');
  }

  getTokenExpirationDate(token: string): Date {
    token = this.getToken()
    const decoded = jwt_decode(token);

    if (decoded.exp === undefined) return null;

    const date = new Date(0);
    date.setUTCSeconds(decoded.exp);
    return date;
  }

  isTokenExpired(token?: string): boolean {
    if (!token) token = this.getToken();
    if (token) return true;

    const date = this.getTokenExpirationDate(token);
    if (date === undefined) return false;
    return !(date.valueOf() > new Date().valueOf());
  }

  logOut(loginType?: string) {
    localStorage.removeItem('isLoggedin');        
  }