javascript - 避免在 AngularJS 中直接访问 URL

Question

我有一个使用 ui-router 进行路由的网络应用程序。有一个用户管理模块，其中为用户指定了某些 Angular 色( Angular 色 x、y 和 z)。当具有 Angular 色 x 的用户登录时，他将被限制在 ui-router 的某些状态，例如“仪表板”。

当用户登录时，我将用户的 Angular 色保存在 cookie 变量中(使用 $cookie)。当具有 Angular 色 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>

Controller :

$scope.roleIsX = function() {

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

}

目前这可以正常工作，但问题是当任何用户登录时，他可以通过在地址栏中写入 URL 来直接导航到该 URL。有没有一种简单的方法可以根据我的情况解决这个问题？

Answer 1

我最终按照@Shivi 的建议使用了ui-router 的resolve。如果有人仍在查找，以下是代码:

    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 的回答