避免在 AngularJS 中直接访问 URL答案

【问题标题】：Avoid direct URL access in AngularJS避免在 AngularJS 中直接访问 URL
【发布时间】：2015-12-14 07:06:41
【问题描述】：

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

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

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 来直接导航到 URL。根据我的情况，有没有一种简单的方法可以解决这个问题？

【问题讨论】：

您无法阻止浏览器浏览，我唯一能想到的是 a) 一切都在一个页面上完成，因此没有其他地址或 b) 您最后保存在 cookie 中用户所在的页面以及您检查的每个页面，以确保他们来自正确的页面或将他们重定向到主页。
如果访问 URL 受限的用户进入该 URL，那么他应该看到一个不允许的页面等。我将如何在 Angular 中执行此操作？
在该页面的控制器中，您可以检查他们是否已登录并检查您是否为他们分配了访问权限，如果他们不应该在那里，请重新路由。
@Sibtain，角度 ui-router 允许您具有解析功能。决心就像承诺一样。您可以在 resolve 中解析用户访问权限，如果允许，则返回一个对象，否则将他导航到其他页面。
@IfTrue 谢谢，我会试试的

标签： javascript angularjs session cookies angular-ui-router

【解决方案1】：

监听$locationChangeStart 事件，并在需要时阻止它：

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

【讨论】：

这段代码应该在哪里？应用程序运行（）？还是哪个控制器？
它在运行块中可能是最好的，但是你需要将roleIsX 函数移到那里。

【解决方案2】：

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

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

【讨论】：