Angular4拦截http错误

我写了一个Angular4HTTP拦截器。对于请求和非错误响应，它都可以正常工作。但是我不能截获401，例如，截获器甚至没有被触发。有人知道如何拦截401，例如转发到登录页面吗

这是我的密码：

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import { PersistenceService, StorageType, IPersistenceContainer } from 'angular-persistence';
import { Router } from '@angular/router';

@Injectable()

export class TokenInterceptor implements HttpInterceptor {

    storageContainer: IPersistenceContainer

    constructor (
        public persistenceService: PersistenceService,
        public router: Router
    ) {
        this.storageContainer = persistenceService.createContainer(
      'org.ptnc.auth', 
      {type: StorageType.SESSION, oneUse: false}
    )
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({
            setHeaders: {
                Authorization: 'Bearer ' + this.storageContainer.get('jwt')
            }
        })

        return next.handle(req)
        .do(event => {
            if(event instanceof HttpResponse ){
                console.log('intercepts the response', event)
                // this.router.navigate(['/auth/login'])
            }
            if(event instanceof HttpErrorResponse){
                console.log('the real error')
            }
        })
    }

}

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpEvent、HttpInterceptor、HttpHandler、HttpRequest、HttpResponse、HttpErrorResponse}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/do'；
从“角度持久性”导入{PersistenceService，StorageType，IPersistenceContainer}；
从'@angular/Router'导入{Router}；
@可注射（）
导出类TokenInterceptor实现HttpInterceptor{
存储容器：IPersistenceContainer
建造师(
公共persistenceService:persistenceService，
公共路由器
) {
this.storageContainer=persistenceService.createContainer(
“org.ptnc.auth”，
{type:StorageType.SESSION，oneUse:false}
)
}
截取（req:HttpRequest，next:HttpHandler）：可观察{
req=req.clone({
集合标题：{
授权：'Bearer'+this.storageContainer.get（'jwt'）
}
})
返回下一个句柄（req）
.do（事件=>{
if（HttpResponse的事件实例）{
log（'截取响应'，事件）
//this.router.navigate（['/auth/login']）
}
if（HttpErrorResponse的事件实例）{
log（“真正的错误”）
}
})
}
}

如果

HttpClient

为响应抛出错误，它会通过可观察链冒泡出来

您必须在

next.handle（req）

observable上使用

catch

，以捕获并处理来自

HttpClient的错误：

intercept（req:HttpRequest，next:HttpHandler）：可观察{
// ...
返回下一个句柄（req）
.do（事件=>{
// ...
})
.catch（错误=>{
//处理错误；
//重播
返回可观察抛出（错误）；
});
}
如果
HttpClient
为响应抛出错误，它会通过可观察链冒泡出来

您必须在
next.handle（req）
observable上使用
catch
，以捕获并处理来自
HttpClient的错误：

intercept（req:HttpRequest，next:HttpHandler）：可观察{
// ...
返回下一个句柄（req）
.do（事件=>{
// ...
})
.catch（错误=>{
//处理错误；
//重播
返回可观察抛出（错误）；
});
}
这是我的http.service.ts的一部分示例

  get(request: string): Observable<any> {
    return this._http.get(`${this.actionUrl}${request}`)
      .map(res => this.extractData(res))
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    return res.json();
  }

  private handleError(error: Response) {
    console.log('Error', error);
    return Observable.throw(error.json().error || 'Server error');
  }

get（请求：字符串）：可观察{
返回此值。_http.get（`${this.actionUrl}${request}`）
.map（res=>this.extractData（res））
.接住（这个.把手错误）；
}
私有数据（res:Response）{
返回res.json（）；
}
私有句柄错误（错误：响应）{
console.log（'Error'，Error）；
返回Observable.throw（error.json（）.error | |'Server error'）；
}

希望它也能有所帮助
这是我的http.service.ts的一部分示例

  get(request: string): Observable<any> {
    return this._http.get(`${this.actionUrl}${request}`)
      .map(res => this.extractData(res))
      .catch(this.handleError);
  }

  private extractData(res: Response) {
    return res.json();
  }

  private handleError(error: Response) {
    console.log('Error', error);
    return Observable.throw(error.json().error || 'Server error');
  }

get（请求：字符串）：可观察{
返回此值。_http.get（`${this.actionUrl}${request}`）
.map（res=>this.extractData（res））
.接住（这个.把手错误）；
}
私有数据（res:Response）{
返回res.json（）；
}
私有句柄错误（错误：响应）{
console.log（'Error'，Error）；
返回Observable.throw（error.json（）.error | |'Server error'）；
}

希望它对使用
HttpInterceptor
拦截
HttpErrorResponse
也有帮助，您必须使用
do
操作符以
rxjs
的方式进行拦截

import 'rxjs/add/operator/do';

return next.handle(req).do(event => {
    console.log('handle success event');
    return event;
}, error_event => {
    console.log('handle error event, ie 404 or 500');
    return error_event;
});

注意：catch没有帮我解决这个问题，因为http错误不是通过
throw（）
触发错误要使用
HttpInterceptor
拦截
HttpErrorResponse
你必须使用
do
操作符以
rxjs
的方式进行拦截

import 'rxjs/add/operator/do';

return next.handle(req).do(event => {
    console.log('handle success event');
    return event;
}, error_event => {
    console.log('handle error event, ie 404 or 500');
    return error_event;
});

注意：catch没有帮我解决这个问题，因为http错误不是通过
throw（）触发错误的。
与可观察对象中的其他错误一样，您需要实现
。catch
。与可观察对象中的其他错误一样，您需要实现
。catch
。