javascript - peticiones - Controlador de error global Ajax con AngularJS

http post angularjs

Question

Cuando mi sitio web era 100% jQuery, solía hacer esto:

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

para establecer un controlador global para 401 errores. Ahora, uso angularjs con $resource y $http para hacer mis solicitudes (REST) ​​al servidor. ¿Hay alguna forma de configurar de forma similar un controlador de error global con angular?

Answer 1

Cree el archivo <script type="text/javascript" src="../js/config/httpInterceptor.js" ></script> con este contenido:

(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);
}());

Answer 2

También estoy construyendo un sitio web con angular y encontré este mismo obstáculo para el manejo global del 401. Terminé usando el interceptor http cuando me encontré con esta publicación en el blog. Tal vez lo encuentres tan útil como yo lo hice.

"Autenticación en la aplicación basada en AngularJS (o similar)". , software espeo

EDITAR: solución final

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 3

Tenga en cuenta que ResponseInterceptors ha quedado en desuso con Angular 1.1.4. A continuación puede encontrar un extracto basado en los documentos oficiales , que muestra la nueva forma de implementar interceptores.

$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'');

Así es como se ve en mi proyecto usando 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'')