Угловой http-перехватчик для каждого API

#javascript #angular #typescript #http #interceptor

#javascript #угловой #typescript #http #перехватчик

Вопрос:

Здравствуйте, у меня есть 3 разных API для разных сервисов. У каждого API есть свой собственный токен аутентификации. Я хочу создать 3 http-перехватчика, по одному для каждого API. Я знаю, что создайте HttpInterceptor для всего проекта, но как я могу создать другой перехватчик для каждой службы api?

Ответ №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)),
          );
        }