Angular Http攔截器(HttpInterceptor)的使用

Http攔截器就是攔截髮出的請求，對其進行統一添加額外處理，然後放行；
對響應進行攔截並作出業務上的判斷，決定是否給與返回
1.定義req.interceptor.ts文件(以‘.interceptor.ts’作爲後綴)

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
const ignoreToken = ['login', 'logout', 'table'];
@Injectable()
export class CommonInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    //請求攔截
    console.log(req);
    return next.handle(req).pipe(
      tap(
        //響應攔截
        event => {
          console.log(event);
          if (event instanceof HttpResponse) {
            if (event.status >= 500) {
              // 跳轉錯誤頁面
            }
          }
        },
        error => {
          console.log(error);
          // token過期 服務器錯誤等處理
        })
    );
  }
}

2.注入在app模塊，在providers數組種添加

 { 
 	provide: HTTP_INTERCEPTORS, 
 	useClass: CommonInterceptor, //自定義攔截器的類名
 	multi: true //這是必須的，因爲它會告訴 Angular 這個 HTTP_INTERCEPTORS 表示的是一個數組，而不是單個的值。
 }

3.運行結果

請求攔截:

響應攔截