Post
Ask Question

Angular HTTP Interceptors: Sending Tokens with Every Request

In modern web applications, authentication plays a crucial role in securing resources and ensuring that only authorized users can access certain parts of the application. One common way to handle authentication is by using tokens, such as JSON Web Tokens (JWTs). In Angular applications, you can send a token to every HTTP request using Angular's HTTP interceptors.

What is an HTTP interceptor?

An HTTP interceptor in Angular is a middleware that intercepts HTTP requests and responses. It provides a way to modify the requests or responses before they are sent or received by the application. This capability is useful for tasks like adding headers, logging, error handling, and more.

Let's go through the steps to implement token-based authentication using an HTTP Interceptor in an Angular application.

Step 1. Create an HTTP Interceptor Service

First, create a new Angular service to handle the HTTP Interceptor. Open your terminal or command prompt and use the Angular CLI to generate the service.

ng generate interceptor auth-interceptor

Step 2. Implement the Interceptor Logic

Open the auth-interceptor.service.ts file and implement the interceptor logic. Here's an example implementation.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // Get the token from localStorage
    const token = localStorage.getItem('token');

    // Clone the request and add the token to the headers if it exists
    if (token) {
      const authReq = req.clone({
        setHeaders: { Authorization: `Bearer ${token}` },
      });
      return next.handle(authReq);
    }

    // If there's no token, just pass the original request
    return next.handle(req);
  }
}

In this code, we retrieve the token from the browser's local storage and add it to the authorization header of the HTTP request if it exists.

Step 3. Provide the Interceptor

Next, provide the interceptor in your Angular module (usually app.module.ts) as a provider. Here's an example of how to do it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth-interceptor.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

By providing the interceptor using the HTTP_INTERCEPTORS token, Angular will use our AuthInterceptor to intercept outgoing HTTP requests.

Step 4. Use HttpClient to Make Requests

Now that the interceptor is set up, you can use Angular's HttpClient service to make HTTP requests throughout your application. The interceptor will automatically add the token to the headers of these requests.

Here's an example service (data.service.ts) that uses HttpClient.

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://dummyjson.com/products');
  }

  postData(data: any) {
    return this.http.post('https://dummyjson.com/post', data);
  }
}

In this example, when you call getData() or postData(), the interceptor will automatically add the authorization header with the token before sending the request.

Conclusion

In conclusion, using HTTP interceptors in Angular allows you to seamlessly add tokens or perform other actions on outgoing HTTP requests. This approach is essential for implementing token-based authentication and ensuring secure communication between your Angular application and the backend API.

GitHub Project Link: https://github.com/SardarMudassarAliKhan/EcommerceSportsShopNetAndAngular-FrontEnd/blob/master/src/app/core/interceptors/jwt.interceptor.ts


Similar Articles