使用 Angular.js 拦截器捕获 HTTP 401

Question

我想使用 Angular.js 在单页 Web 应用程序上实现身份验证。 official Angular documentation 推荐使用拦截器：

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {

    // ...

    'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

问题是当服务器发送 401 错误时，浏览器立即停止并显示“未经授权”消息，或者登录弹出窗口（当服务器发送身份验证 HTTP 标头时），但 Angular 无法捕获它的按照建议拦截要处理的 HTTP 错误。我是不是误会了什么？我尝试了更多在网络上找到的示例（例如this、this 和this），但没有一个有效。

Answer 1

对于 AngularJS >1.3 使用 $httpProvider.interceptors.push('myHttpInterceptor');

.service('authInterceptor', function($q) {
    var service = this;

    service.responseError = function(response) {
        if (response.status == 401){
            window.location = "/login";
        }
        return $q.reject(response);
    };
})
.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
}])

Answer 2

在应用配置块中：

var interceptor = ['$rootScope', '$q', "Base64", function(scope, $q, Base64) {
  function success(response) {
    return response;
  }

  function error(response) {
    var status = response.status;
    if (status == 401) {
      //AuthFactory.clearUser();
      window.location = "/account/login?redirectUrl=" + Base64.encode(document.URL);
      return;
    }
    // otherwise
    return $q.reject(response);
  }
  return function(promise) {
    return promise.then(success, error);
  }
}];

Answer 3

我不知道为什么，但是 401 错误的响应进入了成功函数。

'responseError': function(rejection)
                {
                    // do something on error

                    if (rejection.status == 401)
                    {
                        $rootScope.signOut();
                    }

                    return $q.reject(rejection);
                },
                'response': function (response) {
                    // do something on error
                    if (response.status == 401) {
                        $rootScope.signOut();
                    };
                    return response || $q.when(response);
                }

Answer 4

AngularJS 拦截器仅适用于使用 $http 服务进行的调用；如果您导航到返回 401 的页面，AngularJS 甚至永远不会运行。