Globaler Ajax-Fehlerbehandler mit AngularJS

Als meine Website zu 100% aus jQuery bestand, habe ich Folgendes getan:

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

um einen globalen Handler für 401-Fehler festzulegen. Jetzt verwende ich anglejs mit $resourceund $http, um meine (REST-) Anforderungen an den Server zu erledigen. Gibt es eine Möglichkeit, einen globalen Fehlerbehandler auf ähnliche Weise mit Angular festzulegen?

Ich baue auch eine Website mit Winkel und bin auf dasselbe Hindernis für die globale 401-Handhabung gestoßen. Ich habe schließlich http interceptor verwendet, als ich auf diesen Blog-Beitrag gestoßen bin. Vielleicht finden Sie es genauso hilfreich wie ich.

"Authentifizierung in AngularJS (oder einer ähnlichen) basierten Anwendung." , Espeo-Software

EDIT: endgültige Lösung

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

Bitte beachten Sie, dass responseInterceptors mit Angular 1.1.4 veraltet sind. Unten finden Sie einen Auszug, der auf den offiziellen Dokumenten basiert und die neue Methode zur Implementierung von Interceptors zeigt.

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

So sieht es in meinem Projekt mit Coffeescript aus:

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

Erstellen Sie die Datei <script type="text/javascript" src="../js/config/httpInterceptor.js" ></script>mit diesem Inhalt:

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