Interceptor in Angular

Interceptor in Angular

In order to intercept HTTP requests and answers, the Angular framework includes a middleware mechanism known as HTTP Interceptors in its HttpClient module. In addition to caching replies, handling errors, adding authentication tokens, and changing request headers, they offer a lot of other features. In addition, you can use them to monitor all HTTP traffic, both incoming and outgoing.

Common use of Interceptor 
Property Modification in HTTP Interceptor Requests: With the use of interceptors, malicious actors can alter outbound HTTP requests before they reach the server. Changes to request bodies, addition of headers, or even elimination of requests altogether may be necessary for this.Even more so,

 

interceptors can modify incoming HTTP answers before they reach the application code. This could involve dealing with mistakes, changing answer data, or adding custom code that is particular to responses.Universal Applicability.

 

Once registered at the module level, interceptors are immediately applied to all HTTP requests and responses inside the application, ensuring uniform behaviour across components and services.

• Registering and chaining together many interceptors allows one to construct code that is both modular and reusable.
• Injecting more services or dependencies into interceptors enables more complex logic and application interaction; this technique is known as dependency injection.

The purpose of HTTP interceptor authentication interceptor is to automatically add credentials or authentication tokens to outgoing requests in order to guarantee secure communication with the server.

 

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler) {
         const authReq = req.clone({ setHeaders: { Authorization: '  Bearer token' } });
      return next.handle(authReq);
  }
}

 

Centralising error handling logic is possible with interceptors since they capture and process errors from HTTP replies and provide specific error handling or logging capabilities.

 

Interceptor in Angular

Caching: Request and response interceptors can implement caching methods, which improve application speed by reducing the need to retrieve duplicate data.For the use of auditing or debugging, Angular Interceptors can record HTTP requests and responses.

 

Data Formats: Angular Interceptors can be utilised for data format serialisation and deserialisation, including XML and JSON, as well as for the transformation of request and return data.Interceptors can encapsulate common concerns with HTTP communication, such as rate limitations, retry logic, and performance monitoring.

 

Performance Hit: Interceptors add extra processing to every HTTP request and response. Inefficient completion of this extra work could cause your application to lag, especially under heavy traffic conditions.

The interceptors in Angular can only process HTTP requests provided using the built-in HttpClient module. They will not intercept or modify requests sent using other libraries or techniques like XMLHttpRequest, fetch, or axios.

See More