Angular

Appearance

Comment utiliser les intercepteurs sur Angular ? ​

L'interêt ? ​

Les intercepteurs HTTP sont des outils très utiles dans les applications Angular qui permettent de traiter les requêtes et les réponses HTTP avant qu'elles ne soient envoyées ou reçues par le serveur. Ils peuvent être utilisés pour ajouter, modifier ou supprimer des données dans les entêtes de la requête ou de la réponse, pour ajouter un message de chargement ou pour effectuer une action spécifique en cas d'erreur.

Voici quelques exemples d'utilisation des intercepteurs HTTP :

  • Ajout d'un token d'authentification dans les entêtes de la requête, comme dans l'exemple précédent.
  • Ajout d'un message de chargement lors de l'envoi d'une requête et de son masquage lors de la réception de la réponse.
  • Gestion des erreurs en cas d'échec de la requête, par exemple en affichant un message d'erreur ou en redirigeant l'utilisateur vers une page d'erreur.
  • Modification des données de la requête avant qu'elles ne soient envoyées, par exemple en ajoutant un préfixe à l'URL ou en convertissant les données en format JSON.

Exemple: ajouter un token dans les entêtes ​

Pour ajouter un token d'authentification dans les entêtes de toutes les requêtes HTTP effectuées par votre application Angular, vous pouvez utiliser un intercepteur. Voici comment faire :

  1. Dans votre module principal, importez HTTP_INTERCEPTORS et HttpClientModule.
ts
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    ...
  ],
  providers: [
    ...
  ]
})
export class AppModule { }
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    ...
  ],
  providers: [
    ...
  ]
})
export class AppModule { }

HTTP_INTERCEPTORS est une constante d'Angular qui permet de déclarer un ou plusieurs intercepteurs dans votre application. En utilisant HTTP_INTERCEPTORS dans la liste des fournisseurs de votre module principal, vous indiquez à Angular que vous souhaitez utiliser un ou plusieurs intercepteurs pour traiter les requêtes et les réponses HTTP de votre application.

  1. Créez un nouveau service en utilisant Angular CLI ou en créant manuellement un fichier auth-interceptor.service.ts dans votre répertoire de services.
ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Récupération du token d'authentification (à remplacer par votre code)
    const token = 'mon-token-d-authentification';

    // Ajout du token dans les entêtes de la requête
    const authReq = request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    // Envoi de la requête avec les nouvelles entêtes
    return next.handle(authReq);
  }

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Récupération du token d'authentification (à remplacer par votre code)
    const token = 'mon-token-d-authentification';

    // Ajout du token dans les entêtes de la requête
    const authReq = request.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    // Envoi de la requête avec les nouvelles entêtes
    return next.handle(authReq);
  }

}

Dans un intercepteur HTTP, le paramètre next représente l'objet HttpHandler qui gère la requête suivante dans la chaîne d'intercepteurs.

Lorsque vous appelez la méthode intercept de votre intercepteur, vous pouvez effectuer des modifications sur la requête en utilisant l'objet HttpRequest passé en paramètre et appeler la méthode handle de next pour envoyer la requête modifiée ou non à l'intercepteur suivant ou au serveur.

TIP

Il est recommandé de cloner la requête avant de la modifier dans un intercepteur HTTP afin de ne pas altérer la requête originale.

En effet, la requête originale peut être utilisée à plusieurs endroits dans votre application et il est important de ne pas la modifier accidentellement. En la clonant avant de la modifier, vous créez une copie de la requête originale qui peut être modifiée sans affecter la requête originale.

Il est également possible de cloner la requête en utilisant la méthode clone de l'objet HttpRequest avec des options de modification différentes, par exemple en changeant l'URL ou le type de la requête.

ts
const modifiedReq = request.clone({
  url: 'http://mon-nouvel-url.com',
  method: 'POST'
});
const modifiedReq = request.clone({
  url: 'http://mon-nouvel-url.com',
  method: 'POST'
});
  1. Dans votre module principal, injectez AuthInterceptor dans la liste des fournisseurs en utilisant HTTP_INTERCEPTORS.
ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth-interceptor.service';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth-interceptor.service';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

Votre intercepteur est maintenant configuré et ajoutera le token d'authentification dans les entêtes de toutes les requêtes HTTP effectuées par votre application Angular.

Comment intercepter les erreurs de la requête ? ​

Pour intercepter les erreurs de la requête dans votre application Angular, vous pouvez utiliser un intercepteur HTTP et surcharger la méthode intercept de cette manière :

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

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // Gestion de l'erreur ici
        console.error(error);
        return throwError(error);
      })
    );
  }

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

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // Gestion de l'erreur ici
        console.error(error);
        return throwError(error);
      })
    );
  }

}

Dans cet exemple, nous utilisons l'opérateur catchError de RxJS pour attraper les erreurs de la requête et effectuer une action spécifique. Dans ce cas, nous affichons simplement l'erreur dans la console, mais vous pouvez y ajouter votre propre code de gestion de l'erreur, par exemple en affichant un message d'erreur à l'utilisateur ou en redirigeant l'utilisateur vers une page d'erreur.

Il est également recommandé de retourner l'erreur en utilisant throwError afin que la chaîne de traitement de l'erreur puisse être poursuivie et que les autres composants de votre application puissent être informés de l'erreur.

Références