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 configurar un controlador global para errores 401. Ahora, uso angularjs con $resource
y $http
para hacer mis solicitudes (REST) al servidor. ¿Hay alguna forma de configurar de manera similar un controlador de errores global con angular?
javascript
ajax
angularjs
cricardol
fuente
fuente
Respuestas:
También estoy construyendo un sitio web con angular y me encontré con el mismo obstáculo para el manejo global de 401. Terminé usando el interceptor http cuando encontré esta publicación de blog. Quizás lo encuentre tan útil como yo.
"Autenticación en una 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);
fuente
return response || $q.when(response);
para que si la respuesta está vacía, también se devuelva un objeto de promesa.Tenga en cuenta que responseInterceptors ha quedado obsoleto 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')
fuente
responseError
,rejection
tiene todo lo que necesita.$httpProvider...
queda envuelta en unconfig()
bloque?response
debajo de laresponseError
función en realidad ser referencias arejection
(o tal vez se debería cambiar el nombre del parámetroresponse
?Crea 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); }());
fuente