如何使用angular9拦截器？

相关教程推荐：《angular教程》
创新互联公司长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为修武企业提供专业的成都网站制作、网站建设，修武网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

拦截器统一添加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, next: HttpHandler):
    Observable> {
    // 拦截请求,给请求头添加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）

更多编程相关知识，可访问：编程入门！！
文章名称：如何使用angular9拦截器？
网页地址：http://kswsj.cn/article/cghjch.html

关于创新互联

如何使用angular9拦截器？

其他资讯