Angular - Set headers for every request

Angular - Set headers for every request 📝🔒

Have you ever found yourself needing to set headers for every request in Angular? Maybe you need to set some Authorization headers after the user has logged in, but you're not sure how to do it.

Well, fear not! In this blog post, we'll explore an easy solution to this common issue, and we'll even go the extra mile and show you how to remove those headers on logout.

Setting headers for a particular request 📨

To set headers for a particular request in Angular, you can use the Headers class from the angular2/http module. Here's an example of how to do it:

import { Headers } from 'angular2/http';

// Create a new instance of Headers
var headers = new Headers();

// Append your desired headers
headers.append('headerName', 'value');

// Make an HTTP POST request using these headers
this.http.post(url, data, { headers: headers })
  .subscribe(response => {
    // Do something with the response
  });

You can find more information about this approach in the Angular 2 Series on the Auth0 blog.

Setting headers for every request ✨

Manually setting request headers for every request can be tedious and error-prone. Fortunately, Angular provides us with a powerful feature called an Interceptor.

Interceptors allow us to intercept requests or responses before they are sent or received. This gives us a perfect opportunity to set headers for every request after the user has logged in.

To create an interceptor, you need to implement the HttpInterceptor interface and override the intercept method. Here's an example:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the access token from your authentication service
        const accessToken = this.authService.getAccessToken();

        // Clone the request and set the headers
        const authRequest = request.clone({
            setHeaders: {
                Authorization: `Bearer ${accessToken}`
            }
        });

        // Pass the cloned request to the next handler
        return next.handle(authRequest);
    }
}

Don't forget to add the interceptor to your app's providers:

// app.module.ts
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

With this approach, the interceptor will automatically add the Authorization header to every request after the user has logged in.

Removing headers on logout 🚪❌

To remove the headers on logout, you can simply clear the access token or any other credentials stored in your authentication service. When the user logs out, you can reset the headers to their initial state or remove them altogether.

For example, let's assume you have a method called clearCredentials in your authentication service. In this method, you can reset the headers:

import { Injectable } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    // ...

    clearCredentials(): void {
        // Clear the access token and any other credentials
        // stored in your authentication service

        // Reset the headers to their initial state
        this.headers = new HttpHeaders();
    }
}

By calling clearCredentials on logout, you effectively remove the headers and ensure that subsequent requests do not contain the Authorization header.

Wrapping up 🎁

In this blog post, we've learned how to set headers for every request in Angular. We've explored the manual approach for a particular request, and we've shown you how to leverage interceptors to automatically set the headers after the user has logged in.

Additionally, we've provided an example of how to remove those headers on logout, ensuring that subsequent requests do not include any unnecessary credentials.

Give these techniques a try in your own Angular applications, and enjoy the benefits of consistent and secure request headers!

Have you ever needed to set headers for every request in Angular? How did you approach it? Share your experience in the comments below! 👇🗣️