Angular — Interceptors

Interceptor can help us to inspect and transform (Modify) HTTP request from our application to server. It can also help to inspect and transform (Modify) server’s response back to our application. Multiple interceptors form a forward-and-backward chain of request/response handlers.

Interceptors can perform a variety of implicit tasks, from authentication to logging, in a routine, standard way, for every HTTP request/response. Without interception, developers would have to implement these tasks explicitly for each HttpClient method call.

How to generate an interceptor

After creating angular project use below command to generate an interceptor at the location in your app where you want to generate it

ng generate interceptor my-interceptor-name

Or use short command

ng g interceptor my-interceptor-name

How we can use it?

I am generating an interceptor with name which I will use to pass a custom header which will have my name in every request.

ng g interceptor name

With above command we will get interceptor something which we can see below. Please take a note while generating interceptor we have not added keyword interceptor in the name of interceptor, we just passed name and angular will add interceptor keyword to it, which we can see in below code snippet.

Now I will add some code to above file to pass my name in all request.

So finally we have successfully created our very first and very simple interceptor.

Like intercept(), the handle() method transforms an HTTP request into an Observable of HttpEvents which ultimately include the server's response. The intercept() method could inspect that observable and alter it before returning it to the caller.

The next object represents the next interceptor in the chain of interceptors. The final next in the chain is the HttpClient backend handler that sends the request to the server and receives the server's response.

Most interceptors call next.handle() so that the request flows through to the next interceptor and, eventually, the backend handler. An interceptor could skip calling next.handle(), short-circuit the chain, and return its own Observable with an artificial server response.

This is a common middleware pattern found in frameworks such as Express.js.

Interceptors are (optional) dependencies of the HttpClient service, we must provide them in the same injector (or a parent of the injector) that provides HttpClient. Interceptors provided after DI creates the HttpClient are ignored.

This app provides HttpClient in the app's root injector, as a side-effect of importing the HttpClientModule in AppModule. We should provide interceptors in AppModule as well.

Here in above file we can see we have added our interceptor in providers array.

{ provide: HTTP_INTERCEPTORS, useClass: NameInterceptor, multi: true }

The multi: true option. This required setting tells Angular that HTTP_INTERCEPTORS is a token for a multiprovider that injects an array of values, rather than a single value.

Interceptor order

Angular applies interceptors in the order that we provide them. If we provide interceptors A, then B, then C, requests flow in A->B->C and responses flow out C->B->A.

We will test our interceptor, for this we need to integrate any API in our app, so I have integrated a dummy API and called it in app component.

In above screenshot we can see that our new header is there in the API call.

There are many way to use interceptor but most common two use is as per below:

For passing JWT token in all request which will be the same as we have done here for our name interceptor only change is the header name and value

Second thing is error handling, so when for any API call we get any error, interceptor will caught it and can take action as per need.

Below we can see an example of simple error interceptor.

Conclusion

Here we have seen how we have created our interceptor and used it. If need more details about interceptor please follow the official site of angular.io.