Angular 4 HTTP request from HTTP interceptor

Question

I am trying to update Http to the newer HttpClient.

For JWT refreshing I extended the Http class and override the request() method(https://stackoverflow.com/a/45750985/2735398).
Now I want to do the same with interceptors.

This is the interceptor I have right now:

export class JwtRefreshInterceptor implements HttpInterceptor { public constructor( private httpClient: HttpClient, ) { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(request).catch((error: HttpErrorResponse) => { if (error.status === 401) { return this.httpClient.post(environment.base_uri + 'auth/refresh', {}).flatMap((response) => { // get token from response. // put token in localstorage. // add token to the request. // Do the request again with the new token. return next.handle(request); }); } return Observable.throw(error); }); } }

The problem is that I can't inject HttpClient because I get an error:

Provider parse errors: Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

With extending Http I could just call this.post() because I was working in the Http instance itself. But with the interceptors this can't be done.

How can I make an HTTP request inside an interceptor?

Luca Ritossa · Accepted Answer · 2018-01-09 12:10:16Z

You can inject Injector from @angular/core and get the dependency when needed:

export class JwtRefreshInterceptor implements HttpInterceptor { constructor(private injector: Injector) { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(request).catch((error: HttpErrorResponse) => { if (error.status === 401) { const http = this.injector.get(HttpClient); return http.post(environment.base_uri + 'auth/refresh', {}).flatMap((response) => { // get token from response. // put token in localstorage. // add token to the request. // Do the request again with the new token. return next.handle(request); }); } return Observable.throw(error); }); } }

If I import { Injector } from "@angular/core" and then add "private injector: Injector" to the constructor I get the following..... Uncaught Error: Can't resolve all parameters for ResponseInterceptor: (?) -- Do I need to inject it in the app.module somehow?
I just what i was finding, because i am implementing a token refresh :O

Collectives™ on Stack Overflow

Angular 4 HTTP request from HTTP interceptor

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related