Question

我的目标是取消xhr请求最新的有401状态。

使用下面的代码，我可以取消下一个请求，但如果我尝试做

中止其他请求（即登录）（它需要像canceller.reject（reason））

流程

1设置父路由（auth）以检查是否需要登录

2设置继承auth状态的子root

3当应用程序到达路径时取消对文章的请求并显示模态登录

(function() {
  'use strict';

function Auth($http) {
  return {
    isLoggedIn: function() {
        return $http.get('/api/auth/isloggedin');
    },
    signin: function(data) {
        return $http.post('/api/auth/signin', data);
    }
  };
}
function loginModal($modal, $rootScope,$templateCache) {
    function successCallback (data) {
        console.log('success',data);
    }
    function errorCallback (data) {
        console.log('fail',data);
    }
    return {
        open : function(){
            var modalInstance =  $modal.open({
                template: $templateCache.get('auth/templates/modal-login.html'),
                controller: 'LoginModalController',
                controllerAs: 'auth'
            });
            return modalInstance.result.then(successCallback).catch(errorCallback);
        }
    };
}

function HttpInterceptor($rootScope,$q) {
    var canceller = $q.defer();
    return {
        'request': function(config) {
            config.requestTimestamp = new Date().getTime();
            config.timeout = canceller.promise;
            return config;
        },
        'response': function(response) {
            response.config.responseTimestamp = new Date().getTime();
            return response;
        },
        'responseError': function(rejection) {
            if (rejection.status === 401) {
                $rootScope.$emit('no-auth', rejection);
                canceller.resolve('Unauthorized');
            }
            return $q.reject(rejection);
        }
    };
}

angular.module('auth.services', [])
    .factory('Auth', Auth)
    .factory('HttpInterceptor', HttpInterceptor)
    .factory('loginModal', loginModal);
})();

(function() {
'use strict';

angular.module('auth', 
  ['auth.services','auth.controllers','auth.routes'])
    .run(function($rootScope,loginModal,HAS_MODAL_LOGIN){
      $rootScope.$on('no-auth', function(event, data) { 
        if(HAS_MODAL_LOGIN){
          loginModal.open();
        }
      });
});

})();

(function() {
'use strict';

function config($stateProvider,$httpProvider) {
    $stateProvider      
        .state('auth', {
            abstract: true,
            template: '<ui-view/>',
            resolve:{
                auth : function(Auth){
                    return Auth.isLoggedIn();
                }
            }

    });
    //Http Intercpetor to check auth failures for xhr requests
    $httpProvider.interceptors.push('HttpInterceptor');
}

angular.module('auth.routes', [])
    .config(config);

})();

(function() {
'use strict';

function config($stateProvider) {
    $stateProvider      
        .state('auth.articles', {
            url: '/articles',
            templateUrl: 'articles/templates/index.html',
            controller:'ArticlesController as articles',
            resolve:{
                articlesData : function(Articles){
                    return Articles.get();
                }
            }
    });
}

angular.module('articles.routes', [])
    .config(config);
})();

Answer 1

你不需要拒绝。如果您有401错误，那么您可以直接在那里打开登录对话框。如果用户关闭了对话框，请导航到主页。

请阅读Gabe Scholz撰写的这篇文章

http://brewhouse.io/blog/2014/12/09/authentication-made-simple-in-single-page-angularjs-applications.html

这正是你尝试做的事情，但更清洁。

angular HttpInterceptor取消了超时承诺中止请求

1 个答案: