您好,登錄后才能下訂單哦!
這篇“Angular怎么對(duì)請(qǐng)求進(jìn)行攔截封裝”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“Angular怎么對(duì)請(qǐng)求進(jìn)行攔截封裝”文章吧。
區(qū)分環(huán)境
我們需要對(duì)不同環(huán)境下的服務(wù)進(jìn)行攔截。在使用 angular-cli
生成項(xiàng)目的時(shí)候,它已經(jīng)自動(dòng)做好了環(huán)境的區(qū)分,在 app/enviroments
目錄下:
environments ├── environment.prod.ts // 生產(chǎn)環(huán)境使用的配置 └── environment.ts // 開(kāi)發(fā)環(huán)境使用的配置
我們對(duì)開(kāi)發(fā)環(huán)境進(jìn)行修改下:
// enviroment.ts export const environment = { baseUrl: '', production: false };
baseUrl
是在你發(fā)出請(qǐng)求的時(shí)候添加在請(qǐng)求的前面的字段,他指向你要請(qǐng)求的地址。我什么都沒(méi)加,其實(shí)等同加了 http://localhost:4200
的內(nèi)容。
當(dāng)然,你這里添加的內(nèi)容要配合你代理上加的內(nèi)容調(diào)整,讀者可以自己思考驗(yàn)證
添加攔截器
我們生成服務(wù) http-interceptor.service.ts
攔截器服務(wù),我們希望每個(gè)請(qǐng)求,都經(jīng)過(guò)這個(gè)服務(wù)。
// http-interceptor.service.ts import { Injectable } from '@angular/core'; import { HttpEvent, HttpHandler, HttpInterceptor, // 攔截器 HttpRequest, // 請(qǐng)求 } 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) => { // 處理響應(yīng)的數(shù)據(jù) console.log(response) }, (error: any) => { // 處理錯(cuò)誤的數(shù)據(jù) console.log(error) } ) ) } }
要想攔截器生效,我們還得在 app.module.ts
上注入:
// app.module.ts import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; // 攔截器服務(wù) import { HttpInterceptorService } from './services/http-interceptor.service'; providers: [ // 依賴注入 { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true, } ],
驗(yàn)證
到這里,我們已經(jīng)成功的實(shí)現(xiàn)了攔截器。如果你運(yùn)行 npm run dev
,你會(huì)在控制臺(tái)上看到下面的信息:
想要驗(yàn)證是否需要內(nèi)容憑證才能訪問(wèn)內(nèi)容,這里我使用了 [post] https://jimmyarea.com/api/private/leave/message
的接口嘗試,得到如下錯(cuò)誤:
后端已經(jīng)處理這個(gè)接口需要憑證才可以進(jìn)行操作,所以直接報(bào)錯(cuò) 401
。
那么,問(wèn)題來(lái)了。我們登陸之后,需要怎么帶上憑證呢?
如下,我們修改下攔截器內(nèi)容:
let secureReq: HttpRequest<any> = req; // ... // 使用 localhost 存儲(chǔ)用戶憑證,在請(qǐng)求頭帶上 if (window.localStorage.getItem('ut')) { let token = window.localStorage.getItem('ut') || '' secureReq = secureReq.clone({ headers: req.headers.set('token', token) }); } // ...
這個(gè)憑證的有效期,需要讀者進(jìn)入系統(tǒng)的時(shí)候,判斷一下有效期是否有效,再考慮重置 localstorage
的值,不然會(huì)一直報(bào)錯(cuò),這個(gè)也是很簡(jiǎn)單,對(duì) localstorage
進(jìn)行相關(guān)的封裝方便操作即可。
以上就是關(guān)于“Angular怎么對(duì)請(qǐng)求進(jìn)行攔截封裝”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。