怎样使用angular9拦截器?
发布时间:09/01 来源:未知 浏览:
关键词:
拦截器统一增加token
我们在做一个后台治理系统时,需要给每个恳求的恳求头里面增加token,所以下面我们来理解一下angular的拦截器,并使用
拦截器使用
1.创立http.service.ts,用于网络恳求
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class HttpService { constructor(private http: HttpClient) { } getData () { return this.http.get('/assets/mock/data.json') } }
2.创立noop.interceptor.ts,拦截器实现代码
import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; import { Router } from '@angular/router'; /** Pass untouched request through to the next request handler. */ @Injectable() export class NoopInterceptor implements HttpInterceptor { constructor (private router: Router) {} intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // 拦截恳求,给恳求头增加token let url = req.url // 可以对url停止处置 let token = document.cookie && document.cookie.split("=")[1] // 登录恳求排除在外 // if (!url.includes('login')) { req = req.clone({ url, // 处置后的url,再赋值给req headers: req.headers.set('Authorization', token)//恳求头统一增加token }) // } return next.handle(req).pipe( tap( event => { if (event instanceof HttpResponse) { console.log(event); if (event.status >= 500) { // 处置错误 } } }, error => { // token过期 效劳器错误等处置 // this.router.navigate(['/login']); }) ); } }
3.在app.module.ts中使用
3.1imports中引入HttpClientModule
3.2HttpService的注册
3.3NoopInterceptor拦截器的使用
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { HttpService } from './auth/http.service'; import { NoopInterceptor } from './auth/noop.interceptor'; @NgModule({ imports: [ BrowserModule, HttpClientModule, AppRoutingModule ], providers: [ HttpService, { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true } ], // ... 省略 })
拦截器实现后的结果
拦截器一样配合路由保卫一起使用,想理解可以看另一遍文章,路由保卫(https://blog.csdn.net/qq_44855897/article/details/106985343)
参照 材料
1、angular官网(https://angular.cn/guide/http#intercepting-requests-and-responses)
2、代码地址(https://github.com/zhuye1993/angular9-route)