How to use interceptors to modify HTTP requests and responses in Angular

Question

With the help of code can you explain How to use interceptors to modify HTTP requests and responses in Angular?

Answer 1

In Angular, interceptors are used to modify HTTP requests and responses globally. They are implemented using the HttpInterceptor interface.

Steps to Use Interceptors:

Create an Interceptor:

import { Injectable } from '@angular/core';

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

import { Observable } from 'rxjs';

@Injectable()

export class MyInterceptor implements HttpInterceptor {

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

    const modifiedReq = req.clone({

      headers: req.headers.set('Authorization', 'Bearer token')

    });

    return next.handle(modifiedReq);

  }

}

Register Interceptor in AppModule:

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { MyInterceptor } from './my-interceptor';

@NgModule({

  providers: [

    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }

  ]

})

export class AppModule { }