在角度使用 $http.get 时视图关闭？当 401 作为响应返回时，ng-view 关闭？答案

【问题标题】：View goes off while using $http.get in angular? ng-view goes off when 401 is returned as response?在角度使用 $http.get 时视图关闭？当 401 作为响应返回时，ng-view 关闭？
【发布时间】：2015-07-11 18:57:48
【问题描述】：

我有一个身份验证代码，当我收到成功消息（如 200 响应状态）时，它很好，但如果我收到 401，页面应该显示错误，因为我设置了一些错误状态，但这不会发生，我得到了视图也刷新，原来是空白。请帮忙

app.controller('MyController', ['$scope', '$location', '$http','$rootScope','$route','$localStorage', function ($scope, $location, $http, $rootScope,$route, $localStorage) {
    $scope.username = "";
    $scope.password = "";
    $scope.ipsenData = {};
    $scope.username="";
    $scope.password="";
    $scope.invalidUser="";

    /*Functionalities of the Application*/
    $scope.login = function () {
        $http.post('/ipsen/login', {
            username: $scope.username,
            password: $scope.password
        }).
        success(function (data, status, headers, config) {
            if(status===200){
                console.log("Login Successful");
                $http.get('/ipsen/getrole?userName='+$scope.username)
                .success(function (data, status, headers, config) {
                    if(data.rows[0].RoleName==="Ipsen Manager"){
                        var data = data.rows[0];
                        /*Username and Role Storage*/
                         $localStorage.username=$scope.username;
                         $localStorage.FirstName=data.FirstName;
                         $localStorage.LastName=data.LastName;
                         $localStorage.OrganizationName=data.OrganizationName;
                         $localStorage.RoleName=data.RoleName;
                         $localStorage.Email=data.Email;


                         $location.path('/customers').replace();
                    }
                    else{
                         var data = data.rows[0];
                        /*Username and Role Storage*/
                         $localStorage.FirstName=data.FirstName;
                         $localStorage.LastName=data.LastName;
                         $localStorage.OrganizationName=data.OrganizationName;
                         $localStorage.RoleName=data.RoleName;
                         $localStorage.Email=data.Email;
                         $location.path('/furnacelist/'+$scope.username+"/"+"customer").replace();
                    }
                    /**/
                })
                .error(function (data, status, headers, config) {
                    console.log(data);
                });
            }
        }).
        error(function (data, status, headers, config) {
            if(status === 401){
                $scope.invalidUser="Please Enter Valid Username & Password";
            }
        });
    };
}]);

【问题讨论】：

最初页面有一个视图，您可以在其中看到登录表单和所有内容。单击登录后，视图将全部更改。
看来你需要设置一个拦截器来处理这个问题。见Angular docs，Lukas Ruebbelke的文章也很有用。

标签： javascript ajax angularjs angularjs-directive ng-view

【解决方案1】：

您可以像下面这样设置一个拦截器，这可能会有所帮助，这样您的用户就会在 401 时被卡在登录页面上。

function APIInterceptor($rootScope, $q) {
    var service = this;
    service.responseError = function(response) {
      console.log("in responseError", response); // just to see the error initially
      if (response.status === 401) {
        $rootScope.$broadcast('unauthorized');
        return $q.reject(response);
      }

      return response;
    };
  }

然后将拦截器放入处理路由的配置文件中。

   $httpProvider.interceptors.push('APIInterceptor');

使用以下代码在.run 中使用rootScope.$on。

  $rootScope.$on('unauthorized', function() {
      // ... some code to handle tokens, cookies, whatever ... set to null
      $location.path('/login');
    });

还有其他一些我遗漏了，但我想你明白了。基本上，您想在其中添加一个拦截器来处理您的请求和响应。

【讨论】：