Il peut arriver que sur un appel http, on n’obtient pas un resultat 200 (ok), dans ce cas là, on peut avoir à faire des traitements spécifiques.

Par exemple, sur 403 (accès réfusé) alors que l’utilisateur est déjà connecté (peut être que la session a expiré), on peut vouloir retenter de connecter l’utilisateur ou bien le rediriger vers la page de login. Ceci peut être fait à l’aide d’un http interceptor.

Je vais vous présenter son utilisation dans cet article :

• Création du httpInterceptor :
  
  JavaScript

  (function () { angular.module('app') .factory('httpInterceptor', httpInterceptor); httpInterceptor.$inject = ['$location', '$q', '$http']; //Connexion au WS function httpInterceptor($location, $q, $http) { return { requestError: requestInterceptor, responseError: responseInterceptor }; //Méthode appelé après le retour de l'appel mais avant restitution au client function responseInterceptor(response) { //Statut de la requête http switch (response.status) { // =Accès refusé case 403: break // =Non autorisé case 401: //Relance de la requête return $http(response.config); break; // = Web service indisponible case -1: //Redirection vers la page de login $location.path('/login'); break; } //On rejette la requête return $q.reject(response); } //Interceptor de la requête pour pouvoir faire des traitements avant envoi de la requête function requestInterceptor(request) { } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

  (function () { angular.module('app') .factory('httpInterceptor', httpInterceptor);   httpInterceptor.$inject = ['$location', '$q', '$http'];   //Connexion au WS function httpInterceptor($location, $q, $http) {   return {       requestError: requestInterceptor, responseError: responseInterceptor };       //Méthode appelé après le retour de l'appel mais avant restitution au client function responseInterceptor(response) {       //Statut de la requête http       switch (response.status)       {         // =Accès refusé         case 403:         break         // =Non autorisé         case 401:         //Relance de la requête         return $http(response.config);         break;         // = Web service indisponible         case -1:         //Redirection vers la page de login         $location.path('/login');         break;       }       //On rejette la requête       return $q.reject(response);     }          //Interceptor de la requête pour pouvoir faire des traitements avant envoi de la requête     function requestInterceptor(request) {     }   }

  
   
• Déclaration du httpInterceptor dans la configuration de l’application :
JavaScript

(function () { 'use strict'; var core = angular.module('app.core'); core.config(configure); configure.$inject = ['$httpProvider']; /* @ngInject */ function configure($httpProvider) { $httpProvider.interceptors.push('httpInterceptor'); } })();

1 2 3 4 5 6 7 8 9 10 11 12 13 14

(function () {   'use strict';     var core = angular.module('app.core');   core.config(configure);     configure.$inject = ['$httpProvider'];     /* @ngInject */   function configure($httpProvider) {     $httpProvider.interceptors.push('httpInterceptor');     } })();

Grâce à ce service, on va donc pouvoir faire des traitements en cas d’échec de la requête pour le reconnecter ou bien le rediriger.