Angular Http Interceptor

Http Interceptors are used to intercept any outgoing request from the application. With the help of http interceptors we can modify the request and the incoming response while making the api call.

The interceptor will contain 2 parameters,req and next. The req is the HttpRequest parameter and the next is the HttpHandler parameter.

Let's see how to create an interceptor in an application in an angular application.

Create a new angular application using angular cli command.

ng new angular-tutorial

Create a service to make api call.

ng g s services/http

This will create a service named http.service.ts in services folder. Now open the file and modify the code as below.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
@Injectable({
  providedIn: "root"
})
export class HttpService {
  constructor(private httpClient: HttpClient) {}

  get(url: string) {
    return this.httpClient.get(url);
  }

  post(url: string, data: any) {
    return this.httpClient.post(url, data);
  }
}

In the above service, we inject the HttpClient to the constructor to make api call. In the service we have created two functions.The get() function is used to make get call using httpClient parameter. Similarly, post() function takes two parameter, url and data object and using httpClient parameter we make post call.

Let's create an interceptor by entering the following command.

ng g s services/interceptor

Now modify the code as below.

import { Injectable } from "@angular/core";
import {
  HttpInterceptor,
  HttpEvent,
  HttpResponse,
  HttpErrorResponse
} from "@angular/common/http";
import { Observable, of, throwError } from "rxjs";
import { map, tap, catchError } from "rxjs/operators";
@Injectable({
  providedIn: "root"
})
export class InterceptorService implements HttpInterceptor {
  constructor() {}
  intercept(
    req: import("@angular/common/http").HttpRequest<any>,
    next: import("@angular/common/http").HttpHandler
  ): Observable<HttpEvent<any>> {
    const request = req.clone({
      headers: req.headers.set(
        "Authorization",
        "Bearer asdfajsffjasfasfashlfhlash"
      )
    });
    return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          console.log("API call success");
        }
        return event;
      }),
      catchError(error => {
        if (error instanceof HttpErrorResponse) {
          console.log("Error has occured while calling the api");
          return throwError(error);
        }
      })
    );
  }
}

Here we have implemented the HttpInterceptor to the service. The interceptor will take arguments. The req is of type HttpRequest which contains the entire request details and next parameter is of type HttpHandler which is used to handle the request.

In the above code we have cloned the request and have set a new header parameter Authorization. We cannot directly modify the request directly, so we need to clone the request and modify the request.

Next, to handle the new request we use the next parameter to call the handle function and pass the request as parameter.

The main idea is to add an Authorization parameter to the header for each request. Chain the pipe function after calling the handle function.

The map operator will get any response and check whether the response is of type HttpResponse instance and logs a message to console. If their is any error, then catchError function will be called and the error log message will be logged to console.

Finally, we need to register the interceptor in the app.module.ts file with the following code.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { InterceptorService } from "./services/interceptor.service";
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Open the app.component.ts file and modify the code as below to simulate an api call.

import { Component, OnInit } from "@angular/core";
import { HttpService } from "../services/http.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  reqUrl = "https://reqres.in/api/users?page=2";

  constructor(
    private httpService: HttpService
  ) {}

  ngOnInit() {
    this.httpService.get(this.reqUrl).subscribe(
      (value: any) => {
        console.log(value);
      },
      error => {
        console.log(error);
      }
    );
  }
}

In the above code, we have injected the HttpService to make api call. In the ngOnInit life cycle, we call the get() function of httpService with reqUrl as parameter and subscribe to the observable. Need to unsubscribe this observable in ngOnDestroy lifecycle.

Now press F12 and switch to the Console tab to check the logs printed in the Console.