Angular 自定义一个简单的http请求拦截器

2020-5-12 Jon angular

请求拦截器,用于实现对http请求和响应的处理、监视,比如:请求头的设置、接口数据缓存、响应的处理。下面就做一个简单的请求拦截后给请求头加 token 和设置缓存控制。

  1. 创建一个拦截器

ng g interceptor interceptor/request

  1. 编写拦截器代码
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class RequestInterceptor implements HttpInterceptor {
  constructor() {}
  // token 数据
  yourToken: string;
  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const token = this.getLocalToken();
    if (token == null) throw "No token";
    const resetReq = req.clone({
      setHeaders: {
        'Cache-Control': 'max-age=0',
        'your-token-key': token
      }
    });
    return next.handle(resetReq).pipe(
      catchError(err => {
        // 统一处理错误信息
        console.log(err, '后端接口报错');
        throw err;
      });
    );
  }
  // 获取token
  getLocalToken(): string {
    if (!this.yourToken) {
      this.yourToken = sessionStorage.getItem('yourToken');
    }
    return this.yourToken;
  }
}
  1. 在 app.module.ts 模块中注入自定义的拦截器
...
import { RequestInterceptor } from '@app/interceptor/request.interceptor';
@NgModule({
  ...
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true}
  ]
  ...
})
  1. 这样你的所有的请求都会自动在请求头中加上 Cache-Control 和 your-token-key,就完成了一个简单的http拦截器

注意

这里的 yourToken 是存到 sessionStorage 中的;@app 是在 tsconfit.json 文件 "paths" 对象中设置的 "@app/": ["src/app/"]

标签: angular http 请求 拦截器 interceptor

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap