Interceptor not intercepting http requests (Angular 6)

Question

I'm in the proces of adding an interceptor to my angular 6 project. To make calls to my API, I need to add a bearer token to all calls. Unfortunately the interceptor does not seem to be called. My code:

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

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

        //Retrieve accesstoken from local storage
        const accessToken = localStorage.getItem("access_token");

        //Check if accesToken exists, else send request without bearer token
        if (accessToken) {
            const cloned = req.clone({
                headers: req.headers.set("Authorization",
                    "Bearer " + accessToken)
            });

            console.log('Token added to HTTP request');

            return next.handle(cloned);
        }
        else {
            //No token; proceed request without bearer token
            console.log('No token added to HTTP request');
            return next.handle(req);
        }
    }
}

Does anyone know what could be causing this issue? Thanks in advance.

Answer 1

In my case interceptor wasn't getting involved for service calls because I had imported HttpClientModule multiple times, for different modules.

Later I found that HttpClientModule must be imported only once. Doc ref

Answer 2

You use the right way to intercept.

For people who use interceptor, you need to do 2 modifications :

Interceptor in service

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

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    return next.handle(req).do(evt => {
      if (evt instanceof HttpResponse) {
        console.log('---> status:', evt.status);
        console.log('---> filter:', req.params.get('filter'));
      }
    });

  }
}

Provide HTTP_INTERCEPTOR

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
(...)
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
  ],

Read this article for more details. It's pretty good

Answer 3

If you have a providers array for a module then you have to define the HTTP_INTERCEPTORS too for that module then only it will intercept the requests under that module.

e.g:

providers: [ 
// singleton services
PasswordVerifyService,
{ provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptorService, multi: true }
]

Answer 4

In my case, I had to import both HTTP_INTERCEPTORS, HttpClientModule in same module.

Answer 5

In my case i had a post method like this:

this.http.post<any>(this.authUrl, JSON.stringify({username: username, password: password})).pipe(
      map((response: any) => {
            let token: any = response.token;
            if (token) {
                localStorage.setItem('currentUser', 'value' }));                
                return response; 
            } else {
                return null;
            }
        }),
        catchError((error:any) => {return observableThrowError(error.json().error || 'Server error')})
      );

Because the map method could return null the interceptor stopped intercepting the requests made with this post method call. Don't ask me why this is so, but as soon as i replace null with say response everything started working again.

Answer 6

Check your module & sub-module files, If you have imported the interceptor in a sub-module, then move it to the root module and it should work.

Answer 7

I had the exact same behavior with my standalone component (interceptors not intercepting my http requests).

If you use standalone components instead of importing HttpClientModule in your Module, note that you have to add withInterceptorsFromDi() in your provideHttpClient(...) to make your interceptors work! Or use the new way of functional interceptors via withInterceptors.

See this SO post for more details.

Answer 8

In my case the HttpClient was not used to do the requests.

Instead fetch has been used directly and that is not intercepted by angular.

Changed fetch(...) to http.get(...) and it worked

Answer 9

In my case I accidentally had my service proivded providers : [ ApplicationService ] in my component when it wasn't supposed to be as I had it defined using providedIn: 'root'

Answer 10

Please ensure that dependencies for the interceptor are also provided in the module. ProvidedIn:'root' for the interceptor dependency services did not work for me.

Answer 11

In my case, since I am working with modules, I had to import the child module (AuthModule) in app.module.ts. I was just missing that.

imports: [ HttpClientModule, AppRoutingModule, AuthModule ]