每个 API 的 Angular http 拦截器答案

【问题标题】：An angular http interceptor for each API每个 API 的 Angular http 拦截器
【发布时间】：2020-10-09 11:14:18
【问题描述】：

你好，我有 3 种不同的 API 用于不同的服务。每个 API 都有你自己的 Auth Token。我想创建 3 个 http 拦截器，每个 api 一个。我知道为所有项目创建一个 httpInterceptor，但是如何为每个 api 服务创建不同的拦截器？

【问题讨论】：

标签： javascript angular typescript http interceptor

【解决方案1】：

您可以使用单个拦截器，并且由于在此拦截器中您可以读取 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)),
          );
        }

【讨论】：