This content originally appeared on Level Up Coding - Medium and was authored by Pawan Kumawat
In real world projects, HttpInterceptors are essential. So let's dive in.
Usually APIs are secured by tokens generated by the API server. When we call an API through a client we always pass the token in headers. This token contains all the information about a legitimate user. In each request, token is validated on server and accordingly response is returned.
In Angular, we can send tokens in each request as below.
I have registered at RapidApi which provides a token to access the API hosted on its server and on each request this token is sent via the request header. In your application, it could be any serverside application like .Net, Node, Java that can generate the token.
This looks good but imagine if thousands of APIs are being called in this way, our code will bloat because it is violating DRY [Don’t repeat yourself] principle. If the token is changed then we will have to change it in each API calls.
We can use HttpInterceptor to send tokens with each request as below.
A class AuthInterceptor is created which is implementing HttpInterceptor interface. In overridden intercept method we are cloning the request and adding the required token headers. Finally, we call next.handle with the cloned/intercepted request.
next.handle(interceptedRequest);
In other requests where headers are not required, we are simply calling with the original request.
next.handle(req);
We need to register the provider in the module as below.
now we can call our APIs as
getDataFromAPI(): Observable<string> {
return this.http.get('https://imdb8.p.rapidapi.com/auto-complete?q=game').pipe(map((response: any) => response['q'] as string));
}We can also optimize the base url which is being repeated in each request and move it to the interceptor.
So the key takeaway is
We can intercept the requests by HttpInterceptor and handle/optimize requests and responses as per the need.
I hope the concept is clear.
I’ve created an Angular Course on Udemy which covers many practical problems and solutions in Angular including this one. It could be a stepping stone in your professional Angular Journey. Please take a look.
You can also watch/subscribe my free YouTube channel.
Please subscribe/follow/like/clap to spur me writing more such blogs.
HttpInterceptors was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Pawan Kumawat
Pawan Kumawat | Sciencx (2022-05-04T11:34:50+00:00) HttpInterceptors. Retrieved from https://www.scien.cx/2022/05/04/httpinterceptors/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.