Mondial Ajax gestionnaire d'erreur avec AngularJS

Lorsque mon site est 100% jQuery, j'ai utilisé pour ce faire:

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

à définir une gestionnaire d'erreurs 401. Maintenant, je utiliser angularjs avec $resource et $http de faire de mon (RESTE) de requêtes sur le serveur. Est-il possible également de définir un gestionnaire d'erreurs globales angulaire?

Est-il possible de dupliquer des AngularJS Échec de la Ressource GET?
Non, nous voulons faire une erreur globale 401 gestionnaire pour l'application
lol, avez-vous songé que ce que vous voulez, mais avec un autre état http (que vous pouvez modifier)? De toute façon, pkozlowski.opensource réponse vous montre comment le faire
Non, il est beaucoup plus comme la réponse de Justen...ce n'est pas un doublon avec la question que vous parlez

InformationsquelleAutor cricardol | 2012-08-15

97

Je suis aussi en train de construire un site web avec angulaires et je suis tombé sur cette même obstacle pour le mondial 401 manipulation. J'ai fini par utiliser http intercepteur quand je suis tombé sur ce blog. Peut-être que vous le trouverez aussi utile que j'ai fait.

"L'authentification dans AngularJS (ou similaire) en fonction de l'application.", espeo logiciel

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);
```
- Elle sont superbes! Je vais essayer cet après-midi
- merci pour l'aide!
- J'ai remarqué en bas de commencer la $routeProvider.when( fonction. Généralement, c'est dans un .config(. Cela peut / cela devrait-il exister en dehors de la .config(?
- Je crois qu'il peut être placé à l'extérieur de l' .config(), mais c'est là que je stocke tous mes .quand()
- Notez que sur le docs pour $http ils suggèrent la création d'un servicerather que de le faire en ligne, comme ci-dessus
- puis-je utiliser une approche similaire pour les ressources? Je veux attendre à un succès : false à l'échec, mais à partir d'une ressource du point de vue de 200 HTTP. Jetez un oeil à ma question s'il vous plaît : stackoverflow.com/questions/17038702/...
- Besoin de return $q.rejeter(réponse); lorsque status == 401, afin d'éviter un bruit d'erreur angulaire
- de bonnes choses, mais doit utiliser $location.path('#/') pas le mondial window.location objet
- Il dépend. Si vous voulez vraiment aller à une autre page, pas seulement changer la vue, puis vous devriez vraiment utiliser $de la fenêtre. Si votre page de connexion est juste un autre point de vue et le contrôleur avec votre angulaire ensuite, vous pouvez utiliser $emplacement.chemin
- droite de mon point était d'utiliser l'angle d'objets fournis de sorte que vous pouvez se moquer et de test.
- $httpProvider.responseInterceptors est maintenant obsolète. Voir docs.angularjs.org/api/ng.$http#description_interceptors.
- En cas de succès, vous devrez retourner comme return response || $q.when(response); de sorte que si la réponse est vide, c'est aussi une promesse objet est retourné.
- L'article du blog de l'URL qui Justen visée a été changé: espeo.pl/1-authentification-en-angularjs-application
- ce ne sera probablement pas travailler avec agressive minification mais l'idée est bonne
InformationsquelleAutor Justen

Veuillez noter que responseInterceptors ont été dépréciées Angulaire 1.1.4.
Vous trouverez ci-dessous un extrait basée sur la officiel docs, montrant la nouvelle façon de mettre en œuvre des 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');

C'est à quoi il ressemble dans mon projet à l'aide de 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')

Mais vous n'aurez pas de xhr de données ou d'autres informations utiles dans responseError intercepteur. C'est encore inutilisable pour décider si c'est récupérable.
Vous aurez... à l'intérieur de responseError, rejection a tout ce dont vous avez besoin.
N'est que la dernière ligne, $httpProvider... obtenir enveloppé dans un config() bloc?
en effet, j'ai édité ma réponse à montrer comment je l'ai fait dans mon projet à l'aide de Coffeescript. Utiliser les js2coffee.org si vous préférez en Javascript.
Ne devrait pas du tout la référence à response en vertu de la responseError fonction fait référence à rejection (ou peut-être le paramètre doit avoir son nom a été changé pour response?
en effet, j'ai édité le code de fixer votre remarque
J'ai créé un violon avec différents cas de bord (Trou Noir clientelle, les Codes de Réponse etc.): jsfiddle.net/dv1vobsn

InformationsquelleAutor MikeR

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

Après, y compris le code ci-dessus, que faire?
le code ci-dessus devrait fonctionner sur chaque requête http. Donc, assurez-deux points d'arrêt dans le Chrome, l'un sur le retour à la ligne de réponse et une sur le retour de q$.rejeter pour vérifier qu'il fonctionne comme il se doit.

InformationsquelleAutor Jan-Terje Sørensen

Vous devez vous connecter pour publier un commentaire.