AngularJS: 阻止用户访问某个状态

Question

我正在构建一个使用 sails.js 后端和 angular 前端的应用程序。我试图阻止用户在未获得授权的情况下访问管理控制页面。我已经运行找到了几个答案，但其中 none 似乎完全有效。

目前在我的app.js中，我有

$stateProvider
.state('home', {
  url: "/home",
  templateUrl: "home/homeTemplate.html",
  controller: 'homeController'
})
.state('adminPage', {
  url: "/adminPage",
  templateUrl: "adminPage/adminTemplate.html",
  controller: 'adminPageController',
  resolve: {
    validate: function($q, $sails, $location) {
      var defer = $q.defer();
      $sails.get("/user/getCurrentUser")
          .success(function(response) {
            if (response.user.accessAdminPage) {
              defer.resolve();
            }
            else {
              defer.reject("Access blocked");
              $location.path('/');
            }
            return defer.promise;
          })
    }
  }
})

当前代码部分有效；目前的问题是，当未经授权的用户首先登录并登陆主页，然后访问localhost:1337/#/adminPage时，他实际上到达了该页面。地址栏中的 url 更改为 localhost:1337/#/home 但用户未重定向。现在奇怪的是，当之后通过导航栏访问主页并尝试再次访问管理页面时，用户会按预期重定向到主页（尽管在重新加载页面时会出现烦人的 'flash'） .

对于其他人的提问，这种处理方式有效，我想知道我可能遗漏了什么，以及为什么我当前的解决方案不起作用的一般原因。

Answer 1

你是 return 成功功能的承诺，这永远不会奏效。您应该 return defered.promise （承诺对象）来自外部成功函数。

代码

$stateProvider
.state('home', {
        url: "/home",
        templateUrl: "home/homeTemplate.html",
        controller: 'homeController'
    })
.state('adminPage', {
  url: "/adminPage",
  templateUrl: "adminPage/adminTemplate.html",
  controller: 'adminPageController',
  resolve: {
    validate: function($q, $sails, $location) {
      var defer = $q.defer();
      $sails.get("/user/getCurrentUser")
      .success(function(response) {
        if (response.user.accessAdminPage) {
          defer.resolve();
        } else {
          defer.reject("Access blocked");
          $location.path('/');
        }

      });
      return defer.promise;
    }
  }
});

希望对您有所帮助，谢谢。

Answer 2

使用 pankajparkar 给出的解决方案，问题是您必须在每个状态声明中回复逻辑。我建议您在 onStateChangeStart 事件

中检查用户的授权

angular.module('myApp', ['ui.router'])
  .run(function($rootScope, AuthService){
    $rootScope.$on('$stateChangeStart', 
      function(event, next, nextParams, prev, prevParams) {
        AuthService.isNotAutorized()
          .then(function() {
            event.preventDefault(); 
            $state.go('defaultState');
          });
    });
  });

AngularJS: 阻止用户访问某个状态

AngularJS: Preventing user from accessing a certain state

javascript

node.js

angularjs

sails.js