请求拦截器，用于实现对http请求和响应的处理、监视，比如：请求头的设置、接口数据缓存、响应的处理。下面就做一个简单的请求拦截后给请求头加 token 和设置缓存控制。
- 创建一个拦截器
ng g interceptor interceptor/request
- 编写拦截器代码
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;
}
}
- 在 app.module.ts 模块中注入自定义的拦截器
...
import { RequestInterceptor } from '@app/interceptor/request.interceptor';
@NgModule({
...
providers: [
{provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true}
]
...
})
- 这样你的所有的请求都会自动在请求头中加上 Cache-Control 和 your-token-key，就完成了一个简单的http拦截器
注意
这里的 yourToken 是存到 sessionStorage 中的；@app 是在 tsconfit.json 文件 "paths" 对象中设置的 "@app/": ["src/app/"]
发表评论：