💉 Shot #3: How to add HTTP Headers to every request in Angular

Introduction

Angular Interceptors technique comes in handy when you need to transform each request data, for instance, send an authorization token header with every HTTP request.

Let’s assume we have a service:

We need to add an additional header to every request and don’t want to modify methods or create base HTTP class.

Step 1: Create HTTP interceptor

HTTP request interceptor is a special kind of service that hooks into the request process and allows us to modify request data:

Step 2: Add token to the request

Using the intercept() method we need to clone the original request, modify it, and then call next.handle() to pass the modified request:

Step 3: Register the interceptor

Your interceptor should be provided using HTTP_INTERCEPTORS injection token:

Shot

And here is the final shot ready for injection:

Useful Links

1. Intercepting requests and responses
2. Angular HttpClient