How to Create and Use Interceptors in Angular
Angular Interceptors are another important component of application development. They are used to alter HTTP requests by including various functions.
Interceptors are an excellent way to modify the HTTP request or response to make it more simple and understandable.
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.
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.
We looked at interceptors in Angular in this article. We described what they are and how they operate. We created and delivered a number of interceptors to our application.
There are multiple real-time senarios where angular interceptors can be really useful:
- Modify HTTP headers
- Modifying the request body
- Set authentication/authorization token
- Modify the HTTP response
- Error handling
- Change the Requested URL
Also, we can have multiple interceptors in our application having different functionality.