Why we use interceptors

The other data is just noise for our app. Using a Interceptor, we can clean up the data. With the httpRequest object, we can inspect the URL of the request and determine if it is a request we want to ignore or modify. If the request is to the format API endpoint, then we continue and update the response.

We also only want to modify the request if the request was a response coming back from our API. Now that we filter out only the request we care about we can update the response body to be a simple array of the users we want to display. Now in our component, we can subscribe to our data without having to dig into the response object, our API returned. We have a few options on how to handle these HTTP errors. We could log errors through the Interceptors or show UI notifications when something has gone wrong.

In this example, however, we will add logic that will retry failed API requests. In our request handler, we can use the RxJS retry , operator. The retry operator allows us to retry failed Observable streams that have thrown errors. The retry operator takes a parameter of the number of retries we would like. In our example, we use a parameter of 2, which totals to three attempts, the first attempt plus two additional retries.

If none of the requests succeed, then, the Observable throws an error to the subscriber of the HTTP request Observable. In our component, when we make a bad request, we still can catch the error using the catchError operator. It's because we can have more than two backends or even have more sophisticated rules regarding request headers. I wanted to stick to the approach with multiple types of interceptors for feature modules. And Angular's dependency injection mechanism with class inheritance is what helped me find the solution.

The first thing to understand is how HttpClient works. When instantiating, it takes a service instance that implements the HttpHandler interface to the constructor:. I'll explain why it's so afterwards. Let's name it InterceptingHandler and it will look like this:. Do not confuse InterceptingHandler with InterceptorHandler. They have different responsibilities. We need to implement the former - InterceptingHandler. Its responsibility is to send requests to the first interceptor in the chain, which can pass it to the second interceptor, and so on, eventually reaching HttpBackend.

InterceptorHandler in turn calls the intercept method of the HttpInterceptor in the chain and returns the result. Once we have our InterceptingHandler in place, we can tackle HttpClient.

The idea is to provide a custom HttpClient service in a feature module that inherits most of the functionality from HttpClient. The difference with the standard HttpClient will be that we will use our custom InterceptingHandler to pass a request through interceptors. We need this because:. As you know, all services provided in non-lazy modules are registered at the root module and if multiple providers use the same token they are replaced by each next declaration in the module.

In other words, the last declaration wins. This means that if we want to use a custom service as the HttpClient through provide option, we will override the original HttpClient for the entire application and we don't want that.

That's why we need to use a separate token. It allows us to not think about application infrastructure and codebase. If it was, we are going to log the user out of the application and redirect him to the login page, telling him that the access was denied. Below, we are going to add this treatment to our AnthenticationInterceptor.

By calling catchError through a pipe we are able to handle response errors from the server for that request. Therefore, we are allowed to verify its status and do our treatment as mentioned before. By the way, this is the treatment I have set for learning purposes, but in your real world application here would fit any kind of treatment. Maybe you do not want to redirect the user or maybe you are going to attempt a refresh token api call if an error occurs.

Whatever that is necessary for your application. And from that service we will retrieve information whether that request is supposed to be impersonated or not; and in case it is, the information required for the server, like the impersonated user id. Then, in our interceptor the idea is simple: - Check wheter the request should be impersonated; - If it is an impersonation, send the appropriate header in the request.

Using interceptors can be very useful for multiple purposes on all sorts of applications. Set Headers We can do a lot by manipulating headers. Some things are:. Converting response When the API returns a format we do not agree with, we can use an interceptor to format it the way we like it. We are a team of expert developers, testers and business consultants who strive to deliver nothing but the best.

Planning to build a completely secure and efficient Angular app? Third Rock Techkno is a leading IT services company. We are a top-ranked web, mobile and voice app development company with over 10 years of experience.

Client success forms the core of our value system. We have expertise in the latest technologies including angular , react native , iOs , Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries. Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.

Elasticsearch is more than just a search engine.