Interceptors In Angular Along With Advantage

Introduction

• An interceptor in Angular is a piece of middleware that catches HTTP requests and replies. Globally, interceptors are used to alter or modify HTTP requests and replies. This implies that you may alter a single HTTP request or response and have an impact on all subsequent HTTP requests or answers that pass through that same location.

Interceptors In Angular

Interceptors are a powerful tool in Angular as they can be used for a wide variety of tasks, such as,

• Adding authorization headers to requests
• Logging requests and responses
• Adding or removing parameters from requests
• Transforming response data

How to implement an interceptor in Angular?

• You must develop a class that implements the HttpInterceptor interface in order to implement an interceptor in Angular. Two methods must be implemented in order to use the HttpInterceptor interface: intercept() and, optionally, handleError().

Example :-

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(request: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
        // Get the access token from your authentication service
        const accessToken = this.authService.getAccessToken();
        // Clone the request and add the authorization header
        const authRequest = request.clone({
            headers: request.headers.set('Authorization', `Bearer ${accessToken}`)
        });
        // Pass the cloned request to the next handler in the chain
        return next.handle(authRequest);
    }
}

• In this instance, the intercept() function is overridden by the AUTH Interceptor class, which also implements the HttpInterceptor interface. The intercept() function copies the incoming request and adds an authorization header after retrieving the access token from our authentication service. Using the next.handle() function, we then transmit the cloned request to the subsequent handler in the chain.

To use this interceptor, register it with the Angular HTTP client. You can do this by providing it in the provider’s array of your AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AuthInterceptor } from './auth.interceptor';

@NgModule({
    imports: [BrowserModule, HttpClientModule],
    providers: [{
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptor,
        multi: true
    }]
})
export class AppModule {}

• In this example, we import the AuthInterceptor class and the HttpClientModule. The HTTP_INTERCEPTORS token is then used to add our interceptor to the provider’s array. Since the multi-option is set to true, this HTTP interceptor will be included in the list of already-existing HTTP interceptors rather than taking its place.

Benefits of using interceptors in Angular

• Interceptors make it simple to add cross-cutting issues like authentication and error handling since they allow for the global modification of HTTP requests and answers.
• Interceptors can reduce code duplication by providing a centralized place to modify requests and responses.
• Interceptors can be easily added or removed, making it easy to change the behavior of your application without having to modify every HTTP request and response.

Conclusion :-

• A potent Angular feature that enables global HTTP request and response manipulation is called an interceptor. They offer a centralized location to alter requests and answers and may be utilized for a variety of purposes. You may simply add or delete functionality from your application and eliminate code duplication by making use of interceptors.