久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

上節(jié)的情況下，分別在班級(jí)管理、個(gè)人中心、注銷時(shí)發(fā)生了401錯(cuò)誤。雖然我們可以在三個(gè)組件中分別加入判斷是否發(fā)生401錯(cuò)誤的代碼，但這么做明顯是在造重復(fù)的輪子。 ```typescript this.httpClient.get(url) .subscribe(() => console.log('success'), error => 判斷是否發(fā)生了401，發(fā)生401則注銷應(yīng)用，顯示登錄窗口); ``` ## 再談攔截器 繼續(xù)開(kāi)始之前，我們需要再?gòu)?fù)習(xí)下攔截器：  通過(guò)上圖不難發(fā)現(xiàn)，攔截器不但可以對(duì)請(qǐng)求進(jìn)行攔截，還可以對(duì)后臺(tái)的響應(yīng)進(jìn)行攔截。 在前面的章節(jié)中，我們其實(shí)已經(jīng)偷偷的說(shuō)明了后期要加入一個(gè)登錄的攔截器了：  ## 攔截異常 在`XAuthTokenInterceptor`中我們已經(jīng)初步的掌握了使用`tap()`操作符對(duì)響應(yīng)進(jìn)行監(jiān)聽(tīng)的方法： ```typescript return next.handle(request).pipe(tap(input => { // 僅當(dāng)input類型為HttpResponseBase，才嘗試獲取token并更新 if (input instanceof HttpResponseBase) { const httpHeader = input.headers; const xAuthToken = httpHeader.get('x-auth-token'); if (xAuthToken !== null) { this.setToken(xAuthToken); } } })); ``` 本例中，我們將使用一個(gè)新的操作符`catchError()`來(lái)監(jiān)聽(tīng)后臺(tái)響應(yīng)數(shù)據(jù)是否為**認(rèn)證失敗**。 ### 初始化 來(lái)到`src/app`文件夾，初始化`UnAuth`攔截器： ```bash panjie@panjies-iMac app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-iMac app % ng g interceptor unAuth CREATE src/app/un-auth.interceptor.spec.ts (417 bytes) CREATE src/app/un-auth.interceptor.ts (411 bytes) ``` ### 應(yīng)用攔截器 有了攔截器后，我們將其添加到App模塊中以使其生效： ```typescript +++ b/first-app/src/app/app.module.ts @@ -16,6 +16,7 @@ import {XAuthTokenInterceptor} from './x-auth-token.interceptor'; import {WelcomeComponent} from './welcome.component'; import { NavComponent } from './nav/nav.component'; import {ApiInterceptor} from './api.interceptor'; +import {UnAuthInterceptor} from './un-auth.interceptor'; @NgModule({ @@ -39,7 +40,8 @@ import {ApiInterceptor} from './api.interceptor'; ], providers: [ {provide: HTTP_INTERCEPTORS, useClass: XAuthTokenInterceptor, multi: true}, - {provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true} + {provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true}, + {provide: HTTP_INTERCEPTORS, useClass: UnAuthInterceptor, multi: true} ], bootstrap: [IndexComponent] }) ``` ### catchError 我們?cè)诰帉?xiě)程序時(shí)會(huì)遇到異常，通常一些可見(jiàn)的異常使用`try catch`來(lái)解決。RxJS借鑒了這一思想。當(dāng)數(shù)據(jù)流沒(méi)有按預(yù)期返回時(shí)，將向上拋出異常。打個(gè)現(xiàn)實(shí)生活中可能沒(méi)有的比方，我們關(guān)注了某個(gè)喜歡的人，此后我們將會(huì)收到該人發(fā)布的新?tīng)顟B(tài)，但有一天這個(gè)不走尋常路是被人**發(fā)現(xiàn)**了，自此該賬號(hào)被永久封禁。在此事件中，這個(gè)永久封禁便是個(gè)異常事件。在該賬號(hào)被封的時(shí)候我們將得到一個(gè)某賬號(hào)被封的通知，這便是RxJS中的異常。 在Angular的Http請(qǐng)求中，將兩種情況視為異常： 1. 服務(wù)端的非2XX錯(cuò)誤，比如資源未找到時(shí)發(fā)生的404錯(cuò)語(yǔ)，用戶認(rèn)證失敗時(shí)發(fā)生的401錯(cuò)語(yǔ)，權(quán)限校驗(yàn)時(shí)發(fā)生的403錯(cuò)誤等。 2. 客戶端發(fā)生了網(wǎng)絡(luò)錯(cuò)誤，比如當(dāng)前計(jì)算機(jī)處理脫機(jī)狀態(tài)，無(wú)法訪問(wèn)外部網(wǎng)絡(luò)；或是當(dāng)前計(jì)算機(jī)的網(wǎng)卡因?yàn)轵?qū)動(dòng)的問(wèn)題而未正常工作等。 我們?cè)诖藘H考慮第1種情況，服務(wù)端的非2xx錯(cuò)誤。 與正常數(shù)據(jù)可以使用`tap()`監(jiān)聽(tīng)一樣，異常的數(shù)據(jù)可以`catchError()`操作符來(lái)監(jiān)聽(tīng)。與`tap()`操作符并不要求有返回值不同，`catchError()`操作符要求必須有返回值，該返回值可以通過(guò)`RxJS`提供的`throwError()`方法來(lái)快速實(shí)現(xiàn)： ```typescript +++ b/first-app/src/app/un-auth.interceptor.ts @@ -5,7 +5,8 @@ import { HttpEvent, HttpInterceptor } from '@angular/common/http'; -import {Observable} from 'rxjs'; +import {Observable, throwError} from 'rxjs'; +import {catchError} from 'rxjs/operators'; @Injectable() export class UnAuthInterceptor implements HttpInterceptor { @@ -14,6 +15,11 @@ export class UnAuthInterceptor implements HttpInterceptor { } intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> { - return next.handle(request); + return next.handle(request) + .pipe(catchError(error => { ① + console.log('發(fā)生了錯(cuò)誤', error); + // 使用throwError()繼續(xù)向上拋出異常 + return throwError(error); ② + })); } } ``` - ① `catchError`操作符同樣接收回調(diào)函數(shù)做為參數(shù) - ② 使用`throwError()`方法向上繼續(xù)拋出異常 此時(shí)當(dāng)點(diǎn)擊注銷時(shí)（需要按上節(jié)的步驟，模擬半個(gè)小時(shí)沒(méi)有登錄），將在控制臺(tái)中發(fā)現(xiàn)如下日志：  這其中的`status: 401`就是我們想要進(jìn)行判斷的返回狀態(tài)碼。 ```typescript +++ b/first-app/src/app/un-auth.interceptor.ts @@ -17,7 +17,9 @@ export class UnAuthInterceptor implements HttpInterceptor { intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> { return next.handle(request) .pipe(catchError(error => { - console.log('發(fā)生了錯(cuò)誤', error); + if (error.status === 401) { + console.log('發(fā)生了401錯(cuò)誤, 通知應(yīng)用顯示登錄界面', error); + } // 使用throwError()繼續(xù)向上拋出異常 return throwError(error); })); ``` 此時(shí)一旦發(fā)生401錯(cuò)誤，則會(huì)在控制臺(tái)中打印一條相關(guān)日志。401被判斷出來(lái)后，通知應(yīng)用這個(gè)狀態(tài)則可以實(shí)現(xiàn)：當(dāng)用戶因長(zhǎng)時(shí)間未操作而發(fā)生被動(dòng)注銷時(shí)，及時(shí)地顯示登錄界面了。 下一小節(jié)中，我們將建立一個(gè)服務(wù)，并將其分別注入到攔截器及`Index`組件，并以該服務(wù)為紐帶，在請(qǐng)求發(fā)生401時(shí)將通知發(fā)送給`Index`組件。 | 名稱 | 鏈接 | | ------------ | ------------------------------------------------------------ | | 處理請(qǐng)求錯(cuò)誤 | [https://angular.cn/guide/http#handling-request-errors](https://angular.cn/guide/http#handling-request-errors) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.7.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.7.1.zip) |