Gestionnaire d'erreurs Ajax global avec AngularJS

Question

Quand mon site était 100% jQuery, j'avais l'habitude de faire ça :

$.ajaxSetup({
    global: true,
    error: function(xhr, status, err) {
        if (xhr.status == 401) {
           window.location = "./index.html";
        }
    }
});

pour définir un gestionnaire global pour les erreurs 401. Maintenant, j'utilise angularjs avec $resource y $http pour faire mes demandes (REST) au serveur. Existe-t-il un moyen de définir un gestionnaire d'erreur global similaire avec Angular ?

Answer 1

Je suis également en train de construire un site web avec angular et j'ai rencontré ce même obstacle pour le traitement global 401. J'ai fini par utiliser http interceptor lorsque je suis tombé sur cet article de blog. Peut-être que vous le trouverez aussi utile que moi.

"Authentification dans une application basée sur AngularJS (ou similaire)". , logiciel espeo

EDIT : solution finale

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'], function ($routeProvider, $locationProvider, $httpProvider) {

    var interceptor = ['$rootScope', '$q', function (scope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status;

            if (status == 401) {
                window.location = "./index.html";
                return;
            }
            // otherwise
            return $q.reject(response);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.push(interceptor);

Answer 2

Veuillez noter que les responseInterceptors ont été dépréciés avec Angular 1.1.4. Ci-dessous, vous trouverez un extrait basé sur l'outil documents officiels qui montre la nouvelle façon d'implémenter les intercepteurs.

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    'response': function(response) {
      // do something on success
      return response || $q.when(response);
    },

   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise;
      }
      return $q.reject(rejection);
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');

Voici comment cela se présente dans mon projet utilisant Coffeescript :

angular.module("globalErrors", ['appStateModule']).factory "myHttpInterceptor", ($q, $log, growl) ->
  response: (response) ->
    $log.debug "success with status #{response.status}"
    response || $q.when response

  responseError: (rejection) ->
    $log.debug "error with status #{rejection.status} and data: #{rejection.data['message']}"
    switch rejection.status
      when 403
        growl.addErrorMessage "You don't have the right to do this"
      when 0
        growl.addErrorMessage "No connection, internet is down?"
      else
        growl.addErrorMessage "#{rejection.data['message']}"

    # do something on error
    $q.reject rejection

.config ($provide, $httpProvider) ->
  $httpProvider.interceptors.push('myHttpInterceptor')

Answer 3

Créer le fichier <script type="text/javascript" src="../js/config/httpInterceptor.js" ></script> avec ce contenu :

(function(){
  var httpInterceptor = function ($provide, $httpProvider) {
    $provide.factory('httpInterceptor', function ($q) {
      return {
        response: function (response) {
          return response || $q.when(response);
        },
        responseError: function (rejection) {
          if(rejection.status === 401) {
            // you are not autorized
          }
          return $q.reject(rejection);
        }
      };
    });
    $httpProvider.interceptors.push('httpInterceptor');
  };
  angular.module("myModule").config(httpInterceptor);
}());