在 angularjs $http 中处理重定向

Question

我在我的应用程序中使用了 angularjs http 服务，我在 website 中注意到了这一点：

如果 AJAX 调用成功（服务器在 200 和 209），传递给 success() 函数的函数是 执行。如果 AJAX 调用失败（除 重定向），传递给error()方法的函数被执行。

显然，重定向状态代码既不是成功的一部分，也不是错误回调的一部分。那么我们将如何处理重定向呢？

这就是我的脚本所做的，使用 http get 从服务器获取数据。如果会话过期，服务器返回302 状态码。我应该捕获该状态代码，然后将页面重定向到登录。

app.controller('GraphController', function($scope, $http, localStorageService, $interval) {
        $scope.GraphData = [{"key":"in","values":[]},{"key":"out","values":[]}]; 

        $scope.pollStats = function() {
            $http.get('/statistics/getStat').success(function(lastData, status, headers) {              
                if (status==302) {
                    //this doesn't work
                    //window.location=headers('Location');
                    //this doesn't work either
                    window.location.replace(headers('Location'));
                }else if (status==200) {
                    ...processData
                }
            });
        };
});

显然我的脚本无法运行，因为成功回调无法处理重定向。那么我们应该如何处理呢？

Answer 1

我也遇到了这个问题，试图找到一种很好的方法来实现第一次登录时提示用户更改密码。

我解决这个问题的方法是让服务器返回一个（非官方的）210 状态代码和一个位置标头，其中包含 UI-Router 的状态提供程序所需的信息。在前面的控制器中我添加了：

if (data.status == 210) {
  var location = data.headers().location;
  $state.go(location);
} else {
  $state.go("user", {name: data.data.fullName, userId: data.data.userId});
}

Answer 2

我认为登录重定向有比http拦截器更好的方法，因为它解析请求响应，如果另一个页面有请求的字符串，就会发生错误。

我建议在您的服务中包装 $http 方法，并在发出请求之前检查用户是否已登录：

app.service('httpWrapper', ['$http','requestLogin',function($http,requestLogin){
  var httpWrapper = {};

  // You can add methods for put, post
  httpWrapper.get = function(url){
    // Before making the request, check with a request if the user is logged
    $http.get(urlLogged).success(function (auth) {
        if(!auth.logged){
            // Show login widget
            requestLogin.show();
        }
    }).error(function(){

    });        
    return $http.get(url);
  }

  return httpWrapper;
}]);

然后在您的其他服务中使用 httpWrapper 代替 $http：

app.service('otherService', ['httpWrapper',function(httpWrapper){
  httpWrapper.get(url);
}]);

这里是 requestLogin 的服务：

app.service('requestLogin', ['$rootScope',function($rootScope){
  var requestLogin = {};

  $rootScope.showlogin = false;

  requestLogin.show = function(){
    $rootScope.showlogin = true;
  }

  requestLogin.hide = function(){
    $rootScope.showlogin = false;
  }    
  return requestLogin;
}]);

然后，在你看来：

<div ng-show="showlogin == true">
  Please log-in...
</div>

Answer 3

请注意，这是针对我的项目的。

目标：捕获 302 状态代码并重定向页面（在我的情况下登录）。

结果：在 firebug 中，我可以看到响应代码是 302，但后来我发现 angularjs 通过简单地打印状态值（response.status）返回 200。所以一开始你会认为你是绝望的。但就我而言，我所做的是获取数据（response.data），查找只能在我的登录页面中找到的字符串。然后就是这样。问题解决了：D

这个想法是在这里接受的。

这是代码

app.factory('redirectInterceptor', function($q,$location,$window){
    return  {
        'response':function(response){
        if (typeof response.data === 'string' && response.data.indexOf("My Login Page")>-1) {
            console.log("LOGIN!!");
            console.log(response.data);
            $window.location.href = "/login.html";
            return $q.reject(response);
        }else{
            return response;
        }
        }
    }

    });

    app.config(['$httpProvider',function($httpProvider) {
        $httpProvider.interceptors.push('redirectInterceptor');
    }]);