Question

我使用AngularJS从JSON创建了一个菜单。我想根据分配给用户的角色来显示或隐藏它。我有两个角色，管理员和 HeadQuarter 。我只想将“管理库存和销售库存”菜单显示为 HeadQuarter 角色，而仅将销售库存显示为 Admin 角色

这是我的代码：

org.activiti.engine.ActivitiException: Errors while parsing:
[Validation set: 'activiti-executable-process' | Problem: 'activiti- 
usertask-listener-implementation-missing'] : Element 'class' or 'expression' 
is mandatory on executionListener - [Extra info : processDefinitionId = my- 
process | processDefinitionName = my dynamic process | | id = task1 | | 
activityName = First task | ] ( line: 6, column: 74)

];

我在这里担任职务：

$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是布尔值，根据角色的不同，它们是正确的还是错误的。

这是我的HTML代码：

_wrole

Answer 1

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

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

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

最简单的方法是向导航栏ul项添加ID：

<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;
};

第4步：申请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>

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

2 个答案: