是時候再認識一下Angular中的`DI`了。依賴注入原文為：Dependency injection，簡稱為DI，這是一種重要的應用設計模式。后期在學習Spring Boot時還會廣泛的應用這一特性。Angular神奇的實現了這一模式，這使得我們在項目中能夠快速的適應多種場景。比如我們在單元測試中，某個組件在構造函數中注入了`Httpclient`，則在DI的作用下我們能夠在不改變組件代碼的前提下，引入`HttpModule`來使用真實的后臺，引入`HttpTestingModule`來手動控制Http請求。 在Angular中，除了可注入教程已經演示過的`HttpClient`、`Router`、`ActivedRoute`以外，還可以注入其它任意的**服務**。 本節中，我們將創建一個發送當前用戶已注銷狀態的**服務**，然后將該服務應用到**攔截器**及**組件**，最終查看這個**服務**是如何正常工作的。 ## 上節答案 修正`ApiInterceptor`前先把注銷的地址改成正確的81端口的地址： ```typescript +++ b/first-app/src/app/nav/nav.component.ts @@ -18,7 +18,7 @@ export class NavComponent implements OnInit { } onSubmit(): void { - const url = 'http://angular.api.codedemo.club/teacher/logout'; + const url = 'http://angular.api.codedemo.club:81/teacher/logout'; this.httpClient.get(url) ``` 然后在攔截器增加處理以`http`打頭的請求 ```typescript +++ b/first-app/src/app/api.interceptor.ts @@ -19,6 +19,9 @@ export class ApiInterceptor implements HttpInterceptor { if (url.startsWith('/')) { // 如果以/打頭，比如 /clazz，則直接拼接為：http://angular.api.codedemp.club/api/clazz return this.api + url; + } else if (url.startsWith('http')) { + // 如果請求以http打頭，比如http://angular.api.codedemo.club/teacher/logout，則什么也不做 + return url; } else { // 如果不以/打頭，比如clazz，則接拼的時候加入/ return this.api + '/' + url; ``` 此時攔截器攔截到注銷的請求地址`http://angular.api.codedemo.club:81/teacher/logout`后，則什么什么也不做。這樣以來`ApiInterceptor`即可以為沒有請求前綴的加入前綴，也支持歷史上未改造輪子直接請求后臺api地址。 ## 當前問題 在繼續學習之前，我們先模擬個使用情景。 - 打開瀏覽器，訪問[http://localhost:4200/](http://localhost:4200/)，使用用戶名密碼登錄系統 - 保持半小時當前頁面不動 - 半小時后再回到當前頁 - 此時無論是刷新頁面，還是點擊注銷。除不需要認證的教師管理模塊外，需要認證的個人中心、班級管理、注銷等功能全部失效 - 控制臺報401認證失敗錯誤 這是由于我們的后臺出于安全的考慮做了一個設置：如果用戶半個小時內沒有與后臺交互，則認為用戶處于暫離狀態，后臺接著對處于暫離狀態的用戶做了注銷處理。所以半小時以后，用戶再次來到界面想進行一些需要認證的操作時，全部發生了401錯誤。 如果你沒有耐心等待上半個小時，那么也可以如下操作： - 打開瀏覽器，訪問[http://localhost:4200/](http://localhost:4200/)，使用用戶名密碼登錄系統 - 打開控制臺 ---- 網絡選項卡 - 如果使用的是Chrome瀏覽器，則勾選`Preserve log` - Firefox瀏覽器，無需進行任何設置 - 點擊注銷按鈕 - 使用用戶名密碼再次登錄系統 - 來到控制臺 ---- 網絡，點擊XHR，在搜索框中輸入logout: -  - 然后在下面的記錄上點右鍵 ---- Replay XHR -  - 如果是Firefox瀏覽器，則選擇Resend -  經過上述一通操作，我們模擬了后臺偷偷發生的注銷操作，所以神奇的事情發生了：個人中心、班級管理全部因發生401錯誤而無法使用，同時注銷按鈕也一并失靈了，而且刷新當前頁面也不起作用。 本節我們將共同解決訪問題：當后臺主動將用戶注銷時，前臺在請求后臺時發現發生了401錯誤，則將顯示登錄界面。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.7.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.7.zip) |