1. 首頁 > 生活百科 > >

Angular如何對請求進行攔截封裝？

小知識it知識

Angular如何對請求進行攔截封裝？下面本篇文章給大家介紹一下Angular中實現請求攔截的方法 ， 希望對大家有所幫助！

Angular如何對請求進行攔截封裝？

文章插圖

在上一篇的文章 Angular 中使用 Api 代理 ， 我們處理了本地聯調接口的問題 ， 使用了代理 。
我們的接口是單獨編寫的處理的 ， 在實際的開發項目中 ， 有眾多的接口 ， 有些需要登陸憑證 ， 有些不需要 。 一個一個接口處理不妥 ， 我們是否可以考慮對請求進行攔截封裝呢？【相關教程推薦：《angular教程》】
本文章來實現下 。
區分環境
我們需要對不同環境下的服務進行攔截 。 在使用 angular-cli 生成項目的時候 ， 它已經自動做好了環境的區分 ， 在 app/enviroments 目錄下：
environments ├── environment.prod.ts // 生產環境使用的配置└── environment.ts // 開發環境使用的配置我們對開發環境進行修改下：
// enviroment.tsexport const environment = { baseUrl: '', production: false};baseUrl 是在你發出請求的時候添加在請求的前面的字段 ， 他指向你要請求的地址 。 我什么都沒加 ， 其實等同加了 http://localhost:4200 的內容 。
當然 ， 你這里添加的內容要配合你代理上加的內容調整 ， 讀者可以自己思考驗證
添加攔截器
我們生成服務 http-interceptor.service.ts 攔截器服務 ， 我們希望每個請求 ， 都經過這個服務 。
// http-interceptor.service.tsimport { Injectable } from '@angular/core';import { HttpEvent, HttpHandler, HttpInterceptor, // 攔截器 HttpRequest, // 請求} from '@angular/common/http';import { Observable } from 'rxjs';import { tap } from 'rxjs/operators';import { environment } from 'src/environments/environment';@Injectable({ providedIn: 'root'})export class HttpInterceptorService implements HttpInterceptor { constructor() { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { let secureReq: HttpRequest<any> = req; secureReq = secureReq.clone({ url: environment.baseUrl + req.url }); return next.handle(secureReq).pipe( tap( (response: any) => { // 處理響應的數據 console.log(response) }, (error: any) => { // 處理錯誤的數據 console.log(error) } ) ) }}要想攔截器生效 ， 我們還得在 app.module.ts 上注入：
// app.module.tsimport { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';// 攔截器服務import { HttpInterceptorService } from './services/http-interceptor.service';providers: [ // 依賴注入 { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true, }],驗證
到這里 ， 我們已經成功的實現了攔截器 。 如果你運行 npm run dev ， 你會在控制臺上看到下面的信息：
Angular如何對請求進行攔截封裝？

文章插圖

想要驗證是否需要內容憑證才能訪問內容 ， 這里我使用了 [post] https://jimmyarea.com/api/private/leave/message 的接口嘗試 ， 得到如下錯誤：
Angular如何對請求進行攔截封裝？

文章插圖

后端已經處理這個接口需要憑證才可以進行操作 ， 所以直接報錯 401 。
那么 ， 問題來了 。 我們登陸之后 ， 需要怎么帶上憑證呢？
如下 ， 我們修改下攔截器內容：
let secureReq: HttpRequest<any> = req;// ...// 使用 localhost 存儲用戶憑證 ， 在請求頭帶上if (window.localStorage.getItem('ut')) { let token = window.localStorage.getItem('ut') || '' secureReq = secureReq.clone({ headers: req.headers.set('token', token) });}// ...這個憑證的有效期 ， 需要讀者進入系統的時候 ， 判斷一下有效期是否有效 ， 再考慮重置 localstorage 的值 ， 不然會一直報錯 ， 這個也是很簡單 ， 對 localstorage 進行相關的封裝方便操作即可～
【完】
更多編程相關知識 ， 請訪問：編程入門?。?
【Angular如何對請求進行攔截封裝？】以上就是Angular如何對請求進行攔截封裝？的詳細內容 ， 更多請關注電腦自學網其它相關文章！

    推薦閱讀