使用 JSON 的基于角色的菜单 angularJs

Question

我使用 AngularJS 从 JSON 创建了一个菜单。我想根据分配给用户的角色显示或隐藏它。我有两个角色，Admin 和 HeadQuarter。我只想向 HeadQuarter 角色显示管理库存和销售库存菜单，并且只向 Admin 角色显示销售库存

这是我的代码：

$scope.Menu = [
    {
        Name: 'Manage Inventory',
        SubMenu: [{
            Name: 'Manage Products',
            Link: { Action: 'SearchProduct', Controller: 'Inventory' }
        }, {
            Name: 'Manage SubCategories',
            Link: { Action: 'SearchSubCategory', Controller: 'Inventory' }
        }, {
            Name: 'Manage Categories',
            Link: { Action: 'SearchCategory', Controller: 'Inventory' }
        }, {
            Name: 'Manage Departments',
            Link: { Action: 'SearchDepartment', Controller: 'Inventory' }
        }, {
            Name: 'View/Print Inventory',
            Link: { Action: 'SearchInventory', Controller: 'Inventory' }
        }, {
            Name: 'Stock Taking',
            Link: { Action: 'StockTaking', Controller: 'Inventory' }
        }]
},
{
        Name: 'Sales',
        SubMenu: [{
            Name: 'Sale Products',
            Link: { Action: 'SearchProduct', Controller: 'Inventory' }
        }, {
            Name: 'Manage SubCategories',
            Link: { Action: 'SearchSubCategory', Controller: 'Inventory' }
        }, {
            Name: 'Sale Categories',
            Link: { Action: 'SearchCategory', Controller: 'Inventory' }
        }, {
            Name: 'Sale Departments',
            Link: { Action: 'SearchDepartment', Controller: 'Inventory' }
        }, {
            Name: 'View/Print Inventory',
            Link: { Action: 'SearchInventory', Controller: 'Inventory' }
        }, {
            Name: 'Stock Taking',
            Link: { Action: 'StockTaking', Controller: 'Inventory' }
        }]
}

];

我在这里获得角色：

var _hrole = @Html.Raw(Json.Encode(ViewContext.HttpContext.User.IsInRole("HeadQuarter")));
    var _wrole = @Html.Raw(Json.Encode(ViewContext.HttpContext.User.IsInRole("Admin")));

_hrole 和 _wrole 是布尔值，它们是真还是假，具体取决于角色。

这是我的 HTML 代码：

<ul class="nav navbar-nav">
    <li class="dropdown" ng-repeat="r in Menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{r.Name}}</a>
        <ul class="dropdown-menu" ng-include="'_nestedMenuTemplate'" ng-init="Menu = r.SubMenu"></ul>
     </li>
</ul>

Answer 1

您可以使用_hrole 值来切换显示样式，如下所示：

<ul class="nav navbar-nav" style="@Html.Raw(Json.Encode(ViewContext.HttpContext.User.IsInRole("HeadQuarter")) ? "display:block" : "display:none")">

---

另一种选择是添加一个简单的 jQuery 调用，根据 _hrole 的值切换导航栏的可见性。

最简单的方法是在导航栏中添加一个 id ul item：

<ul id="menu" class="nav navbar-nav">

您的 jQuery 代码将如下所示：

if(_hrole) {
    $('#menu').show();
}
else {
    $('#menu').hide();
}

Answer 2

你可以这样引用：

第 1 步：您必须配置需要显示的菜单。如果菜单具有该角色，UI 将显示它，其他任何东西都隐藏它。您将 RoleShowMenu 字段添加到 $scope.Menu。此字段包含角色将显示。

$scope.Menu = [
    {
        Name: 'Manage Inventory',
        RoleShowMenu : ['HeadQuarter']
        SubMenu: [{
            Name: 'Manage Products',
            Link: { Action: 'SearchProduct', Controller: 'Inventory' }
        }, {
            Name: 'Manage SubCategories',
            Link: { Action: 'SearchSubCategory', Controller: 'Inventory' }
        }, {
            Name: 'Manage Categories',
            Link: { Action: 'SearchCategory', Controller: 'Inventory' }
        }, {
            Name: 'Manage Departments',
            Link: { Action: 'SearchDepartment', Controller: 'Inventory' }
        }, {
            Name: 'View/Print Inventory',
            Link: { Action: 'SearchInventory', Controller: 'Inventory' }
        }, {
            Name: 'Stock Taking',
            Link: { Action: 'StockTaking', Controller: 'Inventory' }
        }]
},
{
        Name: 'Sales',
        RoleShowMenu : ['Admin', 'HeadQuarter']
        SubMenu: [{
            Name: 'Sale Products',
            Link: { Action: 'SearchProduct', Controller: 'Inventory' }
        }, {
            Name: 'Manage SubCategories',
            Link: { Action: 'SearchSubCategory', Controller: 'Inventory' }
        }, {
            Name: 'Sale Categories',
            Link: { Action: 'SearchCategory', Controller: 'Inventory' }
        }, {
            Name: 'Sale Departments',
            Link: { Action: 'SearchDepartment', Controller: 'Inventory' }
        }, {
            Name: 'View/Print Inventory',
            Link: { Action: 'SearchInventory', Controller: 'Inventory' }
        }, {
            Name: 'Stock Taking',
            Link: { Action: 'StockTaking', Controller: 'Inventory' }
        }]
}
];

第 2 步：顺便说一下，您必须在设置为 $rootScope 后获得用户登录角色。使用 $rootScope 缓存数据。 例如，当 XXX 用户登录时，您将获得 XXX' 角色用户。要获得角色，您可以调用 Rest API 或任何方式。假设 XXX 用户具有“HeadQuarter”角色。

$rootScope.rolesUserLogin = 'HeadQuarter';

第 3 步：创建按角色检查显示/隐藏菜单的功能：

$rootScope.hasRole = function (roleShowMenu) {
    for (var i=0; i< roleShowMenu.length; i++) {
        if (roleShowMenu[i] === $rootScope.rolesUserLogin ) {
            return true;
        }
    }
    return false;
};

第四步：申请HTML

<ul class="nav navbar-nav">
    <li class="dropdown" ng-repeat="r in Menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" ng-if="hasRole(r.RoleShowMenu)">{{r.Name}}</a>
        <ul class="dropdown-menu" ng-include="'_nestedMenuTemplate'" ng-init="Menu = r.SubMenu" ng-if="hasRole(r.RoleShowMenu)"></ul>
     </li>
</ul>