Interceptor

One of the new features of the new HttpClient module is the availability of interceptors. The interceptor is between the application and the back end.
By using interceptors, requests from applications can be converted before they are actually submitted to the back end.
The response is the same: if the response arrives from the back end, the interceptor can convert the response before it reaches the application.
Create a chestnut to see how to use it.
1. Create a new file githubauth.interceptor.ts and insert the following code:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/observable';
@Injectable()
export class GithubAuthInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req);
  }
}

The interceptor class GithubAuthInterceptor implements HttpInterceptor, which is in the @angular/common/http library.

//Http Interceptor prototype
export interface HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
}

The interface Http Interceptor requires that the intercept method must be implemented. The intercept method is used to do the main work of the interceptor. The intercept method requires two parameters. The first parameter contains the original request information, and the second parameter is the next HTTP handler to which the request needs to be passed for further processing.

The GithubAuthInterceptor class above passes the original request to a handler (next) without doing anything about it.
2. Processing the original request

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/observable';
@Injectable()
export class GithubAuthInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'token <your GitHub token>')
    });//New row
    return next.handle(authReq);
  }
}

A new Request is created using the clone method, and a JSON object is added to the header attribute. We use the req.headers.set method to create a new header for the Authorization attribute, which is used to submit GitHub access tokens.
Finally, by using the next.handle method, the newly created request object (header contains Authorization) is passed for further processing.

3. Use interceptors
In order to use the interceptor in our application, we need to provide it to the main application module AppModule in the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';//New row
import { AppComponent } from './app.component';
import { GithubAuthInterceptor } from './githubauth.interceptor';//New row
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  //New additions to providers
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: GithubAuthInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

First we import GithubAuthInterceptor, and in the second step, we insert a new object into the array of providers attributes assigned to @NgModule. The object contains three attributes:
1. provide: You need to set it to HTTP_INTERCEPTORS to specify that the HTTP interceptor is provided
2. useClass: The type to be set to our interceptor class
3. multi: You need to set it to multi to tell Angular HTTP_INTERCEPTORS that it is an array of values, not a single value.

The interceptor is now active and the authorization header is added to each automatically sent request.