it-swarm.com.ru

Как условно добавить перехватчики HttpClient в Angular

Недавно я использовал перехватчики с Angular HttpClient.

Я добавляю заголовки, соответствующие некоторым методам HTTP GET, а для некоторых мне эти заголовки не нужны.

Как я могу сказать моему перехватчику условно добавить перехватчики только к этим методам? Я даже могу разделить службы, такие как одна служба для заголовков и одна без заголовков или одна для разных заголовков и одна для разных.

провайдеры NgModule

{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true,
},{
  provide: HTTP_INTERCEPTORS,
  useClass: AngularInterceptor,
  multi: true,
}

MyInterceptors

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({headers: req.headers.set('X-Auth-Token', "-------------------------")});
    return next.handle(authReq);

  }
}


@Injectable()
export class AngularInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {}, err => {
        if(err instanceof HttpErrorResponse){
            console.log("Error Caught By Interceptor");
            //Observable.throw(err);
        }
    });
  }
}
7
Rahul Singh

Примечание: я сам еще не пробовал этот подход, но поиграл с идеей, потому что мы смотрим на аналогичную проблему.

Если бы у нас были очень простые требования, было бы тривиально добавить логику в перехватчик общего назначения и просто на основе URL/метода решить, какой тип перехвата выполнить. Однако наше угловое приложение должно вызывать различные сторонние микросервисы и сторонние API с различными требованиями к перехватчикам. Это фактически расширенный набор ваших требований. 

Одна из идей для реализации этого заключается в расширении HttpClient для каждого API/Сервиса, который нам нужно вызвать, и настройке пользовательского токена внедрения для цепочки перехватчиков. Вы можете увидеть, как угловые регистры по умолчанию HttpClientздесь :

 providers: [
    HttpClient,
    // HttpHandler is the backend + interceptors and is constructed
    // using the interceptingHandler factory function.
    {
      provide: HttpHandler,
      useFactory: interceptingHandler,
      deps: [HttpBackend, [new Optional(), new Inject(HTTP_INTERCEPTORS)]],
    },

Функция interceptingHandler четная экспортируется как ɵinterceptingHandler. Я согласен, что это выглядит немного странно, не уверен, почему у него есть это экспортное имя. 

В любом случае, для использования пользовательских HttpClients вы можете:

export const MY_HTTP_INTERCEPTORS = new InjectionToken<HttpInterceptor[]>('MY_HTTP_INTERCEPTORS');

...
 providers: [
    MyHttpClient,
    {
      provide: MyHttpHandler,
      useFactory: interceptingHandler,
      deps: [HttpBackend, [new Optional(), new Inject(MY_HTTP_INTERCEPTORS)]],
    },

И убедитесь, что MyHttpClient требует MyHttpHandler в своем конструкторе. 

1
Johannes Rudolph