Angular 4.3 HttpInterceptor:如何重新发送请求?

Angular 4.3 HttpInterceptor:如何重新发送请求?,angular,http,interceptor,Angular,Http,Interceptor,我有一个HttpInterceptor,它向每个http请求添加一个JWT令牌。现在,我希望它对401个响应做出反应,这些响应将在令牌到期后立即发生 大致如下: 发送请求 401又回来了 弹出一个登录表单,用户输入他的凭证 如果登录成功,将保存一个新令牌 原始httpRequest将与新令牌一起再次发送 到目前为止,这就是我所拥有的: // Imports [...] @Injectable() export class MyHttpInterceptor implements HttpInt

我有一个HttpInterceptor,它向每个http请求添加一个JWT令牌。现在,我希望它对401个响应做出反应,这些响应将在令牌到期后立即发生

大致如下:

  • 发送请求
  • 401又回来了
  • 弹出一个登录表单,用户输入他的凭证
  • 如果登录成功,将保存一个新令牌
  • 原始httpRequest将与新令牌一起再次发送
  • 到目前为止,这就是我所拥有的:

    // Imports [...]
    
    @Injectable()
    export class MyHttpInterceptor implements HttpInterceptor {
    
        constructor(private logger: LoggingService, private injector: Injector) { }
    
        intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    
            // Handle request
            const authService = this.injector.get(AuthService);
            const authToken = authService.getToken();
    
            if (authToken) {
                request = request.clone({
                    setHeaders: {
                        Authorization: `Bearer ${authService.getToken()}`
                    }
                });
            }
    
            // Handle response
            return next.handle(request)
                .do(event => {
                    if (event instanceof HttpResponse) {
                        this.logger.logDebug(event);
                    }
                })
                .catch((err: HttpErrorResponse) => {
    
                    if (err.status === 401) {
                        // MISSING IMPLEMENTATION HERE   
                    } else {
                        this.logger.logError(this.extractErrorMessage(err));
                    }
    
                    return Observable.throw(err);
                });
        }
    
        private extractErrorMessage(err: HttpErrorResponse): string {
            return err.error && err.error.devMessage ? err.error.devMessage : err.message;
        }    
    }
    
    //导入[…]
    @可注射()
    导出类MyHttpInterceptor实现HttpInterceptor{
    构造函数(专用记录器:LoggingService,专用注入器:注入器){}
    拦截(请求:HttpRequest,下一步:HttpHandler):可观察{
    //处理请求
    const authService=this.injector.get(authService);
    const authToken=authService.getToken();
    如果(authToken){
    request=request.clone({
    集合标题:{
    授权:`Bearer${authService.getToken()}`
    }
    });
    }
    //处理响应
    返回next.handle(请求)
    .do(事件=>{
    if(HttpResponse的事件实例){
    this.logger.logDebug(事件);
    }
    })
    .catch((错误:HttpErrorResponse)=>{
    如果(错误状态===401){
    //这里缺少实现
    }否则{
    this.logger.logError(this.extractErrorMessage(err));
    }
    返回可观察。抛出(错误);
    });
    }
    私有extractErrorMessage(err:HttpErrorResponse):字符串{
    返回err.error&&err.error.devMessage?err.error.devMessage:err.message;
    }    
    }
    
    在我继续之前,我有一些疑问:

  • 是否可以按原样重新发送请求,或者我必须使用HttpClient的方法(GET、POST..)
  • 将HttpClient注入HttpInterceptor是否明智?是否存在无止境循环的风险
  • 这是正确的方法吗
  • 或者,在使用Auth0的angular2 jwt之类的库发送每个http请求之前,我考虑在客户端检查令牌的有效性。这样,我就不必重新发送请求,只需使用新令牌更新其头

    对我来说,这看起来像是一个更干净的解决方案,尽管每次验证令牌都需要额外的时间


    欢迎任何想法。

    可以帮助您找到解决方案吗?没有,但我最终实现了一个弹出窗口,显示401发生的时间。然后,用户可以再次登录并重新发送其请求。