Angular HTTP Interceptor not setting header

Question

I am not getting any errors, and am able to set the authToken value from my login component with a valid token (that I have verified with Postman). But I do not get any Authorization parameter added to my request header.

 entryComponents: [
    ConfirmDialogTargetComponent
  ],
  providers: [
    AuthInterceptor,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true     
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable }                                               from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest }     from '@angular/common/http';
import { Observable }                                               from 'rxjs/Observable';

@Injectable()
export class AuthInterceptor {

    authToken: string = '';

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + this.authToken) });
        return next.handle(authReq);
    }
}

have you tried to debug and set a break point in the intercept method? Are you using the HttpClientModule and not HttpModule? — Jota.Toledo, Nov 08 '17 at 07:06
from app.module import { HttpModule } from '@angular/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; — Austin Harris, Nov 08 '17 at 07:59
If you are using the Http class instead of the HttpClient class to make requests, then you mixed the APIs — Jota.Toledo, Nov 08 '17 at 08:00

score 0 · Answer 1 · answered Nov 08 '17 at 04:15

0

Remove the first AuthInterceptor:

 entryComponents: [
    ConfirmDialogTargetComponent
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true     
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

answered Nov 08 '17 at 04:15

Michael Kang

52,003
16
103
135

unfortunately I tried that and it does not help. It's there because the login component imports it so that it can set the authToken value inside the AuthInterceptor service. If I remove the first instance of AuthInterceptor in the providers array then the login component errors. – Austin Harris Nov 08 '17 at 04:52

Angular HTTP Interceptor not setting header

1 Answers1