IX) Les Intercepteurs HTTP dans AngularJS

Table des matières

🔎 Introduction

Les intercepteurs HTTP dans AngularJS permettent d’intercepter, modifier ou annuler les requêtes et réponses HTTP de l’application. Ils sont particulièrement utiles pour :

✅ Ajouter des en-têtes d’authentification
✅ Gérer les erreurs globales
✅ Afficher des indicateurs de chargement

Plutôt que de répéter ces opérations dans chaque requête, les intercepteurs centralisent ces traitements, garantissant ainsi un code plus propre et maintenable.

🛠️ Pourquoi utiliser les Intercepteurs HTTP ?

Dans une application qui communique avec une API, certaines tâches reviennent fréquemment :

🔹 Ajouter un token d’authentification aux requêtes
🔹 Gérer les erreurs globales (ex : expiration de session, accès interdit…)
🔹 Afficher et cacher un loader durant les requêtes

Sans intercepteurs, ces actions doivent être répétées dans chaque appel HTTP, ce qui alourdit le code et complique sa maintenance.

Avec les intercepteurs HTTP, ces tâches sont gérées de manière centralisée, améliorant ainsi l’organisation et la lisibilité du projet.

⚙️ Fonctionnement des Intercepteurs HTTP

Un intercepteur HTTP est un service AngularJS qui intercepte les requêtes et les réponses HTTP. Il est enregistré via $httpProvider.interceptors.

📌 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) { // Non autorisé
const $state = $injector.get(‘$state’);
$state.go(‘login’); // Redirection vers la page de connexion
}
return $q.reject(rejection);
}
};
});

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

🔍 Explication du code :

✅ Interception des requêtes
👉 Avant l’envoi d’une requête, l’intercepteur ajoute un token d’authentification dans les en-têtes si l’utilisateur est connecté.

✅ Gestion des erreurs
👉 Si une réponse HTTP retourne une erreur 401 (non autorisé), l’utilisateur est automatiquement redirigé vers la page de connexion.

✅ Ajout de l’intercepteur
👉 L’intercepteur est enregistré dans $httpProvider.interceptors.push(), pour être appliqué à toutes les requêtes de l’application.

🎯 Avantages des Intercepteurs HTTP

🔹 Centralisation des traitements → Plus besoin de répéter les mêmes actions dans chaque requête.
🔹 Réduction du code redondant → Meilleure lisibilité et maintenance du projet.
🔹 Gestion unifiée des erreurs et de l’authentification → Une structure plus propre et robuste.

✅ Conclusion

Les intercepteurs HTTP sont un outil essentiel pour gérer efficacement les requêtes et réponses dans AngularJS.

🔸 En centralisant la logique d’authentification et de gestion des erreurs, ils simplifient le développement et améliorent la maintenabilité.
🔸 Ils permettent d’optimiser le code en évitant les répétitions inutiles.

💡 En bref : si ton application AngularJS communique avec une API, l’utilisation des intercepteurs est une excellente pratique pour structurer ton code de manière claire et efficace ! 🚀