HTTP Interceptor
HTTP Interceptors is a special type of angular service that we can implement. It's used to apply custom logic to the central point between the client-side and server-side outgoing/incoming HTTP request and response. Keep in mind that the interceptor wants only HTTP requests.
Operations of HTTP Interceptor
Modify HTTP headers
Modifying the request body
Set authentication/authorization token
Modify the HTTP response
Error handling
Add HTTP Interceptor
Execute this CLI command to add an interceptor service: ng generate interceptor headers
Successfully added headers interceptor
After opening the interceptor service you can see a default view like this:
Interceptor registration
We need to register the HTTP interceptor to use in the application. So, open the app.module.ts file and go to the provider section.
This interceptor will execute for every HTTP request of a client.
Modifying HTTP Headers By interceptor
const apiKey = 'Rohol Amin'
request = request.clone({
setHeaders: {
'api-key': apiKey,
}
})
Now serve the project. Open the browser inspect window then go to the Network tab and click the load data button. Then click the todos API of xhr type. Then go to the HTTP request headers,
Multiple interceptors
It is also possible to use multiple interceptors simultaneously. Just need to maintain the serial which service will be executed before and after. This serialization is defined in provider registration. Meaning the interceptor service will execute according to the provider registration serialization.
{
provide: HTTP_INTERCEPTORS,
useClass: ResponseInterceptor,
multi: true
}
Response Interceptor Implementation
const startTime = (new Date()).getTime();
return next.handle(request).pipe(map(event => {
if (event instanceof HttpResponse) {
const endTime = (new Date).getTime();
const responseTime = endTime - startTime;
console.log(`${event.url} succeed in ${responseTime} ms`)
}
return event;
}));
Note
This HTTP interceptor is most used when authentication and authorization are applied in the application.
Hope this article would have helped you to understand about Angular Interceptor. Here I have tried to explain very simply some uses of the angular interceptor. Happy coding and thanks for reading my article!!!