Une brève analyse de la réponse HTTP AngularJs interceptor_AngularJS

Pourquoi utiliser des intercepteurs ?

À tout moment, si nous souhaitons ajouter des fonctionnalités globales à la requête, telles que l'authentification, la gestion des erreurs, etc., c'est une meilleure façon d'intercepter la requête avant qu'elle ne soit envoyée au serveur ou au retour du serveur.

angularJs fournit un moyen de le gérer au niveau global via des intercepteurs

L'Intercepteur vous permet de :

Intercepter les requêtes en implémentant la méthode request : Cette méthode sera exécutée avant que $http n'envoie la requête en arrière-plan, afin que vous puissiez modifier la configuration ou effectuer d'autres opérations. Cette méthode reçoit un objet de configuration de requête en paramètre et doit renvoyer un objet de configuration ou une promesse. Si un objet de configuration ou une promesse non valide est renvoyé, il sera rejeté, entraînant l'échec de l'appel $http.

Interceptez la réponse en implémentant la méthode de réponse : cette méthode sera exécutée après que $http aura reçu la réponse de l'arrière-plan, afin que vous puissiez modifier la réponse ou effectuer d'autres opérations. Cette méthode reçoit un objet de réponse en tant que paramètre et doit renvoyer un objet de réponse ou une promesse. L'objet de réponse comprend la configuration de la demande, les en-têtes, l'état et les données en arrière-plan. Si un objet de réponse non valide est renvoyé ou si la promesse est rejetée, l'appel $http échouera.

Interceptez les exceptions de requête en implémentant la méthode requestError : parfois, une requête ne parvient pas à être envoyée ou est rejetée par l'intercepteur. L'intercepteur d'exception de requête capture les requêtes qui ont été interrompues par l'intercepteur de requête précédent. Il peut être utilisé pour restaurer la demande ou parfois pour annuler la configuration effectuée avant la demande, comme fermer la barre de progression, activer les boutons et les zones de saisie, etc.

Interceptez les exceptions de réponse en implémentant la méthode ResponseError : Parfois, notre appel en arrière-plan échoue. Il est également possible qu'il ait été rejeté par un intercepteur de requête ou interrompu par un intercepteur de réponse précédent. Dans ce cas, l'intercepteur d'exception de réponse peut nous aider à reprendre l'appel en arrière-plan.

Le cœur de l'intercepteur est la fabrique de services, qui est ajoutée au tableau $httpprovider.interceptors. Inscrivez-vous dans $httpProvider.

AngularJs fournit quatre intercepteurs, dont deux intercepteurs de succès (requête, réponse) et deux intercepteurs d'échec (requestError, réponseError).

Ajouter un ou plusieurs intercepteurs au service :

angular.module("myApp", []) 
  .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        ...... 
        return $q.reject(response); 
      }, 
      'response' : function(response) { 
        ...... 
        return response; 
      }, 
      'request' : function(config) { 
        ...... 
        return config; 
      }, 
      'requestError' : function(config){ 
        ...... 
        return $q.reject(config); 
      } 
    } 
  return httpInterceptor; 
} 

Utilisez ensuite $httpProvider pour enregistrer l'intercepteur dans la fonction .config()

angular.module("myApp", []) 
.config([ '$httpProvider', function($httpProvider) { 
  $httpProvider.interceptors.push('httpInterceptor'); 
} ]); 

Exemple réel : (Interception de 401, 404)

routerApp.config([ '$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('httpInterceptor'); 
  } ]); 
  routerApp.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpInterceptor = { 
      'responseError' : function(response) { 
        if (response.status == 401) { 
          var rootScope = $injector.get('$rootScope'); 
          var state = $injector.get('$rootScope').$state.current.name; 
          rootScope.stateBeforLogin = state; 
          rootScope.$state.go("login"); 
          return $q.reject(response); 
        } else if (response.status === 404) { 
          alert("404!"); 
          return $q.reject(response); 
        } 
      }, 
      'response' : function(response) { 
        return response; 
      } 
    } 
    return httpInterceptor; 
  }  
]); 

Injection de session (intercepteur de requête)

Il existe deux manières de mettre en œuvre l'authentification côté serveur. La première est l’authentification traditionnelle basée sur les cookies. L'utilisateur est authentifié pour chaque demande via des cookies côté serveur. Une autre méthode est la vérification basée sur les jetons. Lorsque l'utilisateur se connecte, il obtient un sessionToken en arrière-plan. Le sessionToken identifie chaque utilisateur côté serveur et est inclus dans chaque requête envoyée au serveur.

Le sessionInjector suivant ajoute l'en-tête x-session-token à chaque requête capturée (si l'utilisateur actuel est connecté) :

<!-- lang: js -->
module.factory('sessionInjector', ['SessionService', function(SessionService) {
  var sessionInjector = {
    request: function(config) {
      if (!SessionService.isAnonymus) {
        config.headers['x-session-token'] = SessionService.token;
      }
      return config;
    }
  };
  return sessionInjector;
}]);
module.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('sessionInjector');
}]);

Créez ensuite une demande :

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');

L'objet de configuration avant d'être intercepté par sessionInjector est comme ceci :

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*"
  }
}

L'objet de configuration après avoir été intercepté par sessionInjector ressemble à ceci :

<!-- lang: js -->
{
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "method": "GET",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "Accept": "application/json, text/plain, */*",
    "x-session-token": 415954427904
  }
}

Le contenu ci-dessus vous présente les connaissances pertinentes de l'intercepteur de réponse HTTP AngularJs. J'espère que le partage de cet article pourra vous aider.