Les Intercepteurs HTTP dans AngularJS

Les Intercepteurs HTTP dans AngularJS

Introduction

Les intercepteurs HTTP dans AngularJS permettent d'intercepter, de modifier ou d'annuler les requêtes et réponses HTTP effectuées par l'application. Cette fonctionnalité est particulièrement utile pour ajouter des en-têtes d'authentification, gérer les erreurs globales ou encore afficher des indicateurs de chargement.

Pourquoi utiliser les Intercepteurs HTTP ?

Lors du développement d'applications utilisant des APIs, certaines opérations, comme la gestion des erreurs ou l'ajout d'un token d'authentification, doivent être effectuées pour chaque requête. Répéter ces opérations dans chaque appel peut entraîner du code redondant et difficile à maintenir.

Les intercepteurs permettent de centraliser ces traitements pour garantir une architecture propre et cohérente.

Fonctionnement des Intercepteurs HTTP

Un intercepteur HTTP est un service AngularJS qui intercepte les requêtes et réponses HTTP. Pour le définir, il faut utiliser la méthode $httpProvider.interceptors.

Voici un exemple d'implémentation d'un intercepteur :

    
      angular.module('app').factory('AuthInterceptor', function($q, $injector) {
        return {
          // Intercepter les requêtes sortantes
          request: function(config) {
            const AuthService = $injector.get('AuthService');
            const token = AuthService.getToken();
            if (token) {
              config.headers.Authorization = 'Bearer ' + token;
            }
            return config;
          },

          // Intercepter les réponses en cas d'erreur
          responseError: function(rejection) {
            if (rejection.status === 401) {
              const $state = $injector.get('$state');
              $state.go('login');
            }
            return $q.reject(rejection);
          }
        };
      });

      // Ajout de l'intercepteur dans $httpProvider
      angular.module('app').config(function($httpProvider) {
        $httpProvider.interceptors.push('AuthInterceptor');
      });
    
  

Dans cet exemple :

1. Interception des requêtes : Avant qu'une requête ne soit envoyée, l'intercepteur ajoute un en-tête d'authentification si un token est disponible.
2. Gestion des erreurs : Si une réponse HTTP contient une erreur (par exemple, un statut 401), l'intercepteur redirige l'utilisateur vers la page de connexion.
3. Ajout de l’intercepteur : L’intercepteur est enregistré via $httpProvider.interceptors.push().

Avantages des Intercepteurs HTTP

• Centralisation des traitements : Les intercepteurs permettent de centraliser la gestion des en-têtes, des erreurs ou autres traitements communs à toutes les requêtes.
• Réduction du Code Redondant : Les intercepteurs éliminent la nécessité de gérer manuellement des tâches répétitives dans chaque appel API.
• Amélioration de la Maintenabilité : Les intercepteurs simplifient la gestion des requêtes HTTP, rendant le code plus clair et facile à maintenir.

Conclusion

Les intercepteurs HTTP sont un outil puissant pour gérer les requêtes et réponses dans AngularJS. En centralisant la logique répétitive, comme l’ajout de tokens d'authentification ou la gestion des erreurs, ils permettent de simplifier le développement tout en garantissant une architecture propre et modulable.