Photo by Artem Bali on Unsplash

Top 10 ways to use Interceptors in Angular

Find out which interceptor superpowers you can start using today

Michael Karén
Mar 5, 2019 · 9 min read

Just like Batman develops his gadgets we can use interceptors to gain superpowers.

There are many ways to use an interceptor, and I’m sure most of us have only scratched the surface. In this article, I will present my ten favorite ways to use interceptors in Angular.

Interceptors 101

HttpInterceptor was introduced with Angular 4.3. It provides a way to intercept HTTP requests and responses to transform or handle them before passing them along.

Photo by Hello I’m Nik on Unsplash

10. URL

Manipulating the URL. Sounds a bit risky when I say it out loud but let’s see how easily we can do it in an interceptor.

const url = “http://jsonplaceholder.typicode.com/todos/1";
this.response = this.http.get(url);
ng serve -ssl
req.clone({ 
url: environment.serverUrl + request.url
});
ng serve — serve-path=<path> — base-href <path>/

9. Loader

Everyone wants to see the spinning wheel of fortune when we are waiting for a response. What if I said we could set it up centrally in an interceptor so that we show a loader whenever there are active requests.


8. Converting

When the API returns a format we do not agree with, we can use an interceptor to format it the way we like it.


7. Headers

We can do a lot by manipulating headers. Some things are:

  • Caching behavior; for example, If-Modified-Since
  • XSRF protection
const modified = req.clone({ 
setHeaders: { "X-Man": "Wolverine" }
});
return next.handle(modified);

6. Notifications

Here we have many different cases where we could show messages. In my example, I show “Object created” every time we get a 201 created status back from the server.

{
data: T,
message: string
}

Like this blog post? Share it on Twitter! 🐦

5. Errors

There are two use cases for errors that we can implement in the interceptor.


4. Profiling

Because interceptors can process the request and response together, they can do things like time and log an entire HTTP operation. So we can capture the time of the request and the response and log the outcome with the elapsed time.


3. Fake backend

A mock or fake backend can be used in development when you do not have a backend yet. You can also use it for code hosted in StackBlitz.

const body = { 
firstName: "Mock",
lastName: "Faker"
};
return of(new HttpResponse(
{ status: 200, body: body }
));

2. Caching

Since interceptors can handle requests by themselves, without forwarding to next.handle(), we can use it for caching requests.


1. Authentication

And first on the list is authentication! It is just so fundamental for many applications that we have a proper authentication system in place. This is one of the most common use cases for interceptors and for a good reason. It fits right in!

  1. Refresh Token
  2. Redirect to the login page

Conclusion

Interceptors were a great addition in Angular 4.3 and had many excellent use cases as we have seen here. Now just let your creativity flow, and I’m sure you can come up with something spectacular!

Photo by Zhen Hu on Unsplash

Call to Action

I always enjoy feedback so please 👏, 📝 and tweet 🐦.
Follow me on Twitter and Medium for blog updates.


Angular In Depth

The place where advanced Angular concepts are explained

Thanks to Tim Deschryver and Alexander Poshtaruk

Michael Karén

Written by

React by day, Angular by night. Senior Consultant jProfessionals. Writer Angular In Depth.

Angular In Depth

The place where advanced Angular concepts are explained

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade