Angular 7：JWT到期时间检查错误

问题描述

我正在创建一个角度应用程序。目前，我想检查JWT的到期时间。我想在每个API调用之前检查JWT exp时间。 例如：

1. https://example.com/get-user-details（超时，然后调用刷新令牌API）
2. https://example.com/refresh-token（获取一个新的有效JWT令牌，存储在本地存储中，并完成第一个API调用-https://example.com/get-user-details ）

但是我遇到了错误。

未捕获（承诺）：TypeError：您提供了“未定义”，其中 流是预期的。您可以提供一个Observable，Promise，Array或 可迭代的。

我认为它们是异步/等待功能的错误，但我无法解决此问题。

import {Inject,Injectable} from '@angular/core';
import {
    HttpClient,HttpErrorResponse,HttpEvent,HttpHandler,HttpInterceptor,HttpRequest,HttpResponse
} from '@angular/common/http';
import {Observable} from 'rxjs';
import {catchError,tap} from 'rxjs/operators';
import {SHttpConfig} from './http.conf';
import {StorageService} from '../../services/storage.service';
import {PopAlertService} from '../pop-alert/pop-alert.service';
import {Router} from '@angular/router';
import {JwtService} from '../../services/jwt.service';
import {getDecodedJWT} from '../../helpers/functions';

@Injectable()
export class SHttpInjectorService implements HttpInterceptor {
    cachedRequests: Array<HttpRequest<any>> = [];

    constructor(
        private storage: StorageService,private config: SHttpConfig,private pop: PopAlertService,private router: Router,private jwt: JwtService
    ) {
    }

    intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
        const user: any = this.storage.user;
        const addToken = !req.urlWithParams.includes('token');
        const token = user ? user.token : null;
        if (token && !req.url.includes('token=') && addToken) {
            this.modify(req,user,token).then(res => {
                req = res;
                return this.handleRequest(next,req,token);
            });
        } else {
            return this.handleRequest(next,token);
        }
    }

    private async modify(req,token) {
        let user_token = user.token;
        const expireDate = getDecodedJWT(token).exp;
        if (Date.now() >= expireDate * 1000) {
            const result = await this.jwt.getRefreshedJWT().toPromise();
            user_token = result.token;
            user.token = user_token;
            this.storage.user = user;
        }
        return req.clone({
            setHeaders: {Authorization: `Bearer ${user_token}`},setParams: {token: user_token}
        });
    }

    private handleRequest(next,token) {
        return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                if (event.body.code === 401 && token) {
                    this.router.navigate(['/']).catch(err => {console.log(err); });
                    this.storage.removeData();
                    this.pop.open('Your Session has expired ');
                }
            }
        },(err: any) => {
            if (err instanceof HttpErrorResponse) {
                if (err.status === 401) {
                    this.collectFailedRequest(req);
                } else if (err.status === 0 && err.message.match('Http failure response')) {
                    this.pop.open('Couldn\'t get response from server');
                }
            } else {
                // tslint:disable-next-line:no-shadowed-variable
                this.router.navigate(['/']).catch(err => {console.log(err); });
            }
        }));
    }

    public collectFailedRequest(request): void {
        this.cachedRequests.push(request);
    }
}

解决方法

如错误所述，期望流而不是未定义流，问题的原因在if子句内：

   if (token && !req.url.includes('token=') && addToken) {
        this.modify(req,user,token).then(res => { // <-- here
             req = res;
             return this.handleRequest(next,req,token);
        });
   }

方法拦截期望返回一个 Observable ，并且如果满足if条件，则它不返回任何内容，因为您将return语句放入了异步内部方法，因此编译器将回调函数放入回调队列，并继续到下一行，由于没有任何内容，它返回未定义。

我建议使用Observables和RXJS运算符，并执行以下操作：

intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {
    const user: any = this.storage.user;
    const addToken = !req.urlWithParams.includes('token');
    const token = user ? user.token : null;
    if (token && !req.url.includes('token=') && addToken) {
        return this.modify(req,next,token);
    } else {
        return this.handleRequest(next,token);
    }
}

private modify(req,token): Observable<HttpEvent<any>> {
    let user_token = user.token;
    const expireDate = getDecodedJWT(token).exp;
    if (Date.now() >= expireDate * 1000) {
      return this.jwt.getRefreshedJWT().pipe(flatMap((result) => {
        user_token = result.token;
        user.token = user_token;
        this.storage.user = user;
        const clonedReq =  req.clone({
            setHeaders: {Authorization: `Bearer ${user_token}`},setParams: {token: user_token}
        });
        return this.handleRequest(next,clonedReq,token);
      }));
    }   
    return this.handleRequest(next,token);
}

另外，我认为最好以其他方式处理此问题，因为使用这种方法，您要检查令牌是否在每个请求中均已过期，这会给服务器的所有请求增加一些额外的延迟，请求的持续时间超过了应有的时间，相反，您可以采用更懒惰的方法，如果令牌已过期，则从服务器返回错误，然后可以存储请求，触发刷新令牌逻辑并最终恢复失败的请求。