Question

我正在使用带有ui-router的Angularjs在我的网络应用程序中导航。我正在使用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

要阻止用户点击该链接，您可以使用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访问该页面，您需要编写一个角度配置函数来检查$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-router基于角色隐藏

1 个答案: