Question

我有一个使用ui-router进行路由的网络应用程序。存在用户管理模块，其中给予用户某些角色（角色x，y和z）。当具有角色x的用户登录时，他将被限制在ui路由器的某些状态，例如＆＃39;信息中心＆＃39;

当用户登录时，我已将用户的角色保存在cookie变量中（使用$cookie）。当使用角色x的用户登录时，我还使用ng-hide来隐藏仪表板导航侧栏：

HTML：

<li ui-sref-active="active">
   <a ui-sref="dashboard" ng-hide="roleIsX()">
       <i class="fa fa-laptop"></i> <span class="nav-label">Dashboard</span>
   </a>
</li>

控制器：

$scope.roleIsX = function() {

  if ($cookies.get('loggedInUserRole') === "x")
    return true;
  else
    return false;

}

现在可以正常使用，但问题是当任何用户登录时，他可以通过在地址栏中写入来直接导航到URL。是否有一种简单的方法可以解决这个问题，同时考虑我的情况？

Answer 1

收听$locationChangeStart事件，并在需要时予以阻止：

$scope.$on("$locationChangeStart", function(event, next, current) {
    if (!$scope.roleIsX()) {
        event.preventDefault();
    }
});

Answer 2

我最终使用resolve ui-router作为@Shivi建议。以下是代码，如果有人仍在查找：

    app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
        function($urlRouterProvider, $stateProvider, $locationProvider){
         ...

        .state('user-management', {
          ...
          ...
          resolve: { 
            roleAuthenticate: function($q, UserService, $state, $timeout) {
              if (UserService.roleIsX()) {
                // Resolve the promise successfully
                return $q.when()
              } else {

                $timeout(function() {
                  // This code runs after the authentication promise has been rejected.
                  // Go to the dashboard page
                  $state.go('dashboard')
                })
                // Reject the authentication promise to prevent the state from loading
                return $q.reject()
              }
            }


          }
        })

此代码检查roleIsX是否继续处于其他状态为打开状态dashboard。

有用的参考：angular ui-router login authentication - 由@MK Safi回答

避免在AngularJS中直接访问URL

2 个答案: