本節展示如何在前臺發起的請求中加入令牌以及接收到響應信息后如何更新令牌。 angular提供的**攔截器**機制與spring的過濾器一樣可以提供在header中傳遞令牌的功能。以前臺獲取所有的教師為例，時序圖如下：  # 初始化攔截器 于src/app/core中使用`ng g class authTokenInterceptor`命令創建一個攔截器。 ``` panjiedeMac-Pro:core panjie$ ng g class authTokenInterceptor CREATE src/app/core/auth-token-interceptor.spec.ts (212 bytes) CREATE src/app/core/auth-token-interceptor.ts (38 bytes) ``` 初始化代碼如下： src/app/core/auth-token-interceptor.ts ```javascript import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; import {Observable} from 'rxjs'; @Injectable() export class AuthTokenInterceptor implements HttpInterceptor ?{ intercept(req: HttpRequest<any> ?, next: HttpHandler ?): Observable<HttpEvent<any>> ?{ console.log('攔截到請求信息。請求地址：' + req.url + '; 請求方法：' + req.method); return next.handle(req); ? } } ``` * ? 固有寫法（聲明該類可被注入） * ? 繼承HttpInterceptor（可以規避一些語法方面的錯誤） * ? 上一個處理者傳遞過來的請求信息 * ? 下一個處理者（可能也是一個攔截器，也可能直接就轉發給后臺了） * ? 返回值，此返回值將傳遞給上一個處理者 * ? 將請求信息傳遞給下一個處理者，被將下一個處理者返回的信息返回給上一個處理者 在當面項中可以理解為：上一個處理者指的教師列表組件對應的C層；下一個處理者指的是后臺。 # 提供攔截器 有了攔截器后，使用以下代碼為項目提供此攔截器，以使攔截器在項目中生效： src/app/app.module.ts ```javascript providers: [ {provide: HTTP_INTERCEPTORS ?, useClass: AuthTokenInterceptor ?, multi: true ?} ], ``` * 當依賴需要?時，將實例化的?注入。 * ? 此依賴支持多個（可以為項目配置多個攔截器，發起請求時數據依次通過配置的多個攔截器） # 測試 使用`ng serve`啟動前臺并來到教師管理`http://localhost:4200/teacher`，查看控制臺信息如下：  如此便可以在前臺發起請求時進一步定制header中的auth-token的值了。 # 加入header HttpRequest中提供了直接修改header的方法，利用此方法可以方便的向請求中添加header信息： src/app/core/auth-token-interceptor.ts ```javascript console.log('攔截到請求信息。請求地址：' + req.url + '; 請求方法：' + req.method); req.headers.set('auth-token', '123456'); return next.handle(req); ``` ## 測試 再次刷新`http://localhost:4200/teacher`后查看控制臺中的網絡選項卡，找到后臺的請求記錄查看header情況：  卻沒有找到對應的key為auth-token的記錄。這是由于angular攔截器中的request與spring過濾器中的request一樣，都不希望request中的數據被用戶修改。所以即使是使用了`req.headers.set`方法設置了header中auth-token的值，也不會起作用。 ## req.clone spring中解決此問題的時候使用的裝飾器，很大部分原因是由于spring已經提供了好用的裝飾器HttpServletRequestWrapper。而angular為了解決此問題提供了一個clone方法。使用方法如下： ``` console.log('攔截到請求信息。請求地址：' + req.url + '; 請求方法：' + req.method); const reqClone = req.clone({ ? headers: req.headers.set('auth-token', '123456') }); return next.handle(reqClone); } ``` * ? 調用clone()方法由復制一份與原請求相同的請求信息 * ? 在復制的過程中，使用附加了auth-token的header信息覆蓋原信息 再次測試：  此外，angular認為在攔截器中對header進行設置是一項較常規的操作，所以還提供了更簡單的`setHeaders`方法： ```javascript intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const reqClone = req.clone({ setHeaders: {'auth-token': '123456'} }); return next.handle(reqClone); } ``` # 集成測試 最后，啟動后臺以進行集成測試以驗證前后臺的配合情況。 測試前先清除session緩存以免發生CORS錯誤。  ## 測試一：無效token 傳入無效token 123456  分發新token并返回。 ## 測試二：不傳token ```javascript intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const reqClone = req.clone({ setHeaders: {'auth-token': '123456'} ? }); return next.handle(reqClone); } ```  未傳入token，則分發新token ## 測試三：傳入有效token ```javascript intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const reqClone = req.clone({ setHeaders: {'auth-token': 'af1c0c77-67d0-4ec2-8321-2f88e32f76af★'} }); return next.handle(reqClone); } ``` * ★ 本地測試時，請修改為測試一或測試二中返回的auth-token值  傳入有效token時，在向應信息中又獲取到了此有效token # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.2.0](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.2.0) | - |