CODEWITHSUNDEEP
angulartypescriptangular-http-interceptors
Han Che
Han Che

Reputation: 8519

angular 4.3x dynamic http interceptor

I followed this article from medium to create a http interceptor which lets me add headers to each http call

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

The article uses the authService to get a token dynamically. However as soon as I inject HttpClient into the AuthService I get a circular injection error.

Are there other ways i can dynamically adjust the interceptor?

Upvotes: 0

Views: 3316

Answers (2)

Touqeer Shafi
Touqeer Shafi

Reputation: 5284

From the article it says:

It should be noted that Angular’s new HttpClient from @angular/common/http is being used here and not the Http class from @angular/http. If we try to make requests with the traditional Httpclass, the interceptor won’t be hit

Please make sure you are using import { HttpClient } from '@angular/common/http'; in the import section.

and then it the constructor use it: constructor(public http: HttpClient) {}

Upvotes: -3

Estus Flask
Estus Flask

Reputation: 223114

A conventional way to avoid circular dependencies in both AngularJS and Angular is to get another provider instance in-place and not on provider instantiation:

export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService, public injector: Injector) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const httpClient = injector.get(HttpClient);
    ...
  }
}

Notice that if the interceptor applies to all HttpClient requests, it will be applied to the one that is done inside the interceptor itself and likely result in infinite recursion. In order to avoid this the request can be marked to skip the interceptor (e.g. via custom header).

Upvotes: 5

Related Questions