統一攔截器，顧名思義就是統一攔截所有的請求，然后根據請求書寫自己的業務邏輯，比如請求結果session過期處理，在header頭部加上驗證參數token等等，這個時候就需要用到攔截器。
首先我們創建一個類，名為AuthHttpInterceptor的攔截器并且繼承了HttpInterceptor攔截器：
image.png
攔截器的具體實現部分：
image.png
業務處理：一些通用操作，根據服務器返回來的狀態處理不同的業務，請求的參數不對，token過期沒有通過驗證，這個時候需要我們做統一處理
image.png
最后我們要在app.module.ts中添加我們的攔截器
image.png
已經寫了好幾年現在需要用到，重新整理了一下，記得點贊哦
代碼如下：
import { Injectable } from "@angular/core";
import {
HttpErrorResponse,
HttpEvent,
HttpHandler, HttpHeaderResponse, HttpInterceptor, HttpRequest, HttpResponse,
} from "@angular/common/http";
import { Observable, of } from "rxjs/index";
import { catchError, mergeMap } from "rxjs/internal/operators";
import { StorageService } from '../servers/storage.service';
/**
- 統一攔截器
*/
@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
headers: any;
constructor(
private storageService: StorageService
) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpHeaderResponse | HttpResponse<any>> {
let req: any;
if (request.url.endsWith('/login')) {
let req = request.clone({
headers: request.headers.set('JSESSIONID', 'JSESSIONID ' + null)
});//這里可以在請求中加參數
return this.newMethod(next, req)
} else {
let req = request.clone({
headers: request.headers.set('Content-Type','application/x-www-form-urlencoded')
});
return this.newMethod(next, req)
}
}
private newMethod(next: HttpHandler, req: HttpRequest<any>): Observable<HttpHeaderResponse | HttpResponse<any>> {
return next.handle(req).pipe(mergeMap((event: any) => {
// 正常返回，處理具體返回參數
if (event instanceof HttpResponse && event.status === 200) {
//console.log(event);
return this.handleData(event); //具體處理請求返回數據
}
return of(event);
}), catchError((err: HttpErrorResponse) => this.handleData(err)));
}
private handleData(event: HttpResponse<any> | HttpErrorResponse): Observable<any> {
// 業務處理：一些通用操作
switch (event.status) {
case 200:
if (event instanceof HttpResponse) {
//const body: any = event.body;
return of(event);
}
break;
case 401: // 未登錄狀態碼
case 404:
case 500:
default:
return of(event);
}
}
//
private getAccessToken(): string {
const token = this.storageService.get('AccessToken')
return token;
}
private getSessionId(): string {
const token = this.storageService.get('jsessionid')
return token;
}
}
