javascript - 每个 API 的 Angular http 拦截器
问题描述
您好,我有 3 种不同的 API 用于不同的服务。每个 API 都有你自己的 Auth Token。我想创建 3 个 http 拦截器,每个 api 一个。我知道为所有项目创建一个 httpInterceptor,但是如何为每个 api 服务创建一个不同的拦截器?
解决方案
您可以使用单个拦截器,并且由于在此拦截器中您有权读取 URL,因此您可以创建一个函数,根据此使用不同的令牌,例如:
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
let token;
if (request.url.indexOf(PATH_ROUTE_ONE) !== -1) {
token = localStorage.getItem(TK1);
} else if(request.url.indexOf(PATH_ROUTE_TWO) !== -1) {
token = localStorage.getItem(TK2);
} else {
token = localStorage.getItem(TK3);
}
if (token) {
request = request.clone({
setHeaders: {
authorization: `Bearer ${token}`,
},
});
}
return next.handle(request).pipe(
tap((res) => {
if (res instanceof HttpResponse) {
// TODO: Update token info
}
}),
catchError((err: HttpErrorResponse) => throwError(err)),
);
}
如果您想使用 3 条路径,您也可以这样做,并且您只需阅读 URL 即可知道您是应用它还是让它持续很长时间
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
let token = localStorage.getItem(TK1)
if (request.url.indexOf(PATH_ROUTE_ONE) !== -1) {
request = request.clone({
setHeaders: {
authorization: `Bearer ${token}`,
},
});
}
return next.handle(request).pipe(
tap((res) => {
if (res instanceof HttpResponse) {
// TODO: Update token info
}
}),
catchError((err: HttpErrorResponse) => throwError(err)),
);
}
推荐阅读
- angular - 从可发布的 Angular 库访问环境设置
- spring-boot - 即使在模拟之后,Null 也会传递给自动装配服务 - SpringBootTest
- asp.net-mvc - 在我的 cs-html 页面中未突出显示已调试的行
- python - Django 模型中的类属性和实例属性有何不同?
- html - 为什么背景的行为与其他 HTML 元素的行为不同?
- reactjs - 如何在反应创建应用程序上导入缩小的js文件
- javascript - Divi Wordpress 主题:顶级父级不可点击且未链接到移动菜单上的页面,并折叠嵌套项目
- wordpress - 将产品从 Prestashop 嵌入到 Wordpress 博客
- java - 如何在没有 IDE 的情况下将外部 jar 文件包含到 java 项目中?
- angular - 无法使 mat-paginator 工作,已加载整个数据