Угловое меню на основе ролей с использованием JSON

Question

Я создал меню из JSON, используя AngularJS. Я хочу показать или скрыть это на основе ролей, назначенных пользователям. У меня есть две роли: 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

Вы можете сослаться таким образом:

Шаг 1: вам нужно настроить, какое меню нужно показать. Если меню играет эту роль, пользовательский интерфейс покажет его, а все остальное скрыто. Вы добавляете поле 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>

Answer 2

Вы можете использовать значение _hrole как способ переключения стиля отображения, как показано ниже:

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

---

Другой вариант - добавить простой вызов jQuery, который переключает видимость панели навигации на основе значения _hrole.

Самый простой способ - добавить идентификатор на панель навигации. ul item:

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

Ваш код jQuery будет выглядеть примерно так:

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