Angular ui-路由器根据角色隐藏

Question

我正在使用 Angularjs 和 ui-router 在我的网络应用程序中导航。我正在使用 Web Api 作为我的后端。我使用了 Taiseer Joudeh 的教程来实现身份验证和授权。现在那部分工作得很好，但现在我想根据经过身份验证的用户的角色在前端隐藏菜单项。我的状态提供程序中有以下代码：

            $stateProvider
            .state("warehouse", {
                abstract: true,
                url: "/warehouse",
                template: "<ui-view/>",
                ncyBreadcrumb: {
                    label: "Warehouse"
                }
            })
            .state("warehouse.manager", {
                url: "/pt/manager",
                templateUrl: "/App/Views/Warehouse/Pt/manager.html",
                controller: "PtManagerController",
                ncyBreadcrumb: {
                    label: "PT Beheer"
                },
                data: {
                    roles: ["Admin", "User", "Manager"]
                }
            });

并且用户数据存储在本地存储中，在控制器中像这样检索：

$scope.currentUser = localStorageService.get("authorizationData");

我的菜单如下所示：

            <li>
            <a bs-dropdown aria-haspopup="true" aria-expanded="false" class="header-item-toggle">Warehouse <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <!-- PTs -->
                <li class="dropdown-header">PTs</li>
                <li>
                    <a ui-sref="warehouse.manager">PT Beheer</a>
                </li>
            </ul>
        </li>

用户的角色可通过 $scope.currentUser.roles 访问；但我真的不知道如何从这里继续。有没有人可以帮助我或让我朝着正确的方向前进？我读过一些博客文章，但它们与我的解决方案有很大不同，而且我对 Angular 没有那么多经验，所以我无法将它们翻译成我的情况。

非常感谢所有帮助。

Answer 1

要防止用户点击 link，您可以在 HTML 中使用 ng-if 语句来与当前用户的角色进行比较。

<li ng-if="currentUser === 'Admin'">
  <a ui-sref="warehouse.manager">PT Beheer</a>
</li>

为了概括这一点，我使用了将用户角色存储在服务中的解决方案，并创建了一个检查用户角色的指令。然后可以像这样使用该指令。

<li user-role="administrator">
  <a ui-sref="warehouse.manager">PT Beheer</a>
</li>

如果你想阻止用户通过 url 访问页面，你需要编写一个 angular 配置函数来检查 $stateChangeStart 事件，检查用户角色和调用 preventDefault().

angular.module('myModule').config(function($rootScope, userService) {
  $rootScope.$on('$stateChangeStart', function(event, toState) {
    if (userService.role is not in toState.data.roles) { // pseudo code
      event.preventDefault();
    }
  }
}

Angular ui-路由器根据角色隐藏

Angular ui-router hide based on roles

authorization

angularjs

angular-ui-router