How to Create and Use Interceptors in Angular

What Is An Angular HTTP Interceptor

An HTTP interceptor is an Angular service that intercepts HTTP requests and responses generated by the built-in HTTP client of the Angular framework.

By using an interceptor to change HTTP requests and answers in a single area, we may avoid redundant code and make our code more intelligible.

Angular Interceptor is built similarly to other services, but it must have an intercept function. You will always intercept the request and, if desired, follow it through to intercept the response.

How Does The Interceptor Work?

Assume we need to do some operation on each request sent through httpClient in the application.

For example, we must provide an auth token in each request so that the server can authenticate and deliver us the required answer. To do this, we will establish a service in between that will allow us to modify our httpRequest or httpResponse accordingly. The graphic below might help you better grasp the situation:

How To Create A Simple HTTP Interceptor

Angular interceptor can be created using the following command:

An angular interceptor will look the same as a service with @Injectable(), which implements HttpInterceptor, which has a method called intercept that allows you to intercept the HTTP request and response. Consider the following example:

Here, Angular gives a reference to the httpRequest object when the intercept() function is used. We can review and alter this request as required. When our logic is finished, we use next.handle and send the revised request back to the application.

We'll also have to update it into the @NgModule

Operations of HTTP Interceptor

We can perform a wide range of actions using Angular interceptors. Let's take it one at a time:

Modify HTTP Headers

It is capable of modifying HTTP request header data.

Modifying The Request Body

The following steps can be taken to modify the request body:

We can modify the request body contained within httpRequest.

Set Authentication/Authorization Token

In a real-time scenario, it may be necessary to include an API key or a JSON token in the header to allow authentication.

Using httpRequest.clone, we may clone a request and then forward it once it has been modified. As in the example, we will include authorization in the request header.

Modify The HTTP Response

The HTTP response can also be altered. If we want to transform XML data into JSON when it is received from the server, we may write the interceptor shown below:

Here, we may add handler and subscribe to the httpResponse using pipe, and then read whenever it receives the response.

Error Handling

Since the interceptor can handle both the request and the response, you may write standard code to handle the HTTP error that you received as a response.

Setting The New Headers

The following steps can be taken to add the new request header:

Cancel The Current Request

The following steps can be taken to cancel the current request:

Change The Requested URL

Manipulating the URL seems unsafe, but let's see how easy it is in an interceptor.

It's as simple as cloning the request and changing http:// with https://. The copied HTTPS request is then sent to the next handler.

This scenario may also be required if we need to add different API URLs for different development environments; this could be managed here.

Can We Have Multiple Interceptors?

Yes, you may declare many interceptors in the application, each with its own scope of action. For example, you may design one interceptor that is exclusively responsible for setting the authentication header, another for error handling, and so on.

To utilise several angular interceptors, use multi:true when registering in @NgModule.