Ng-hide или ng-show на основе ролей пользователей

Question

Утренние разработчики,

Мне было поручено назначить роли пользователей определенным видам. Я получил три роли:

• питания пользователя (можно редактировать, удалить)
• Viewer (не изменять, не удаления)
• Basic (без редактирования)

Это то, что я получил в коде:

HTML5 и AngularJS:

<button ng-click="vm.openSettings(vm.selected, $event)" class="btn btn-default" ng-hide="vm.viewmode === 1 || !vm.selected" ><i class="fa fa-cog"></i>&nbsp;Settings</button> 
<button ng-click="vm.deleteProject(vm.selected, $event)" class="btn btn-default" ng-hide="vm.viewmode === 1 || !vm.selected" ><i class="fa fa-trash-o"></i>&nbsp;Delete</button>` 

JS:

function getUsers() { 
    var d = $q.defer(); 
    var url = '/api/sso/getusers'; 
    $http.get(url) 
     .success(function (data, status, headers, config) { 
      d.resolve(data); 
     }) 
     .error(function (data, status, headers, config) { 
      logger.error(data); 
      d.reject(); 
     }); 
    return d.promise; 
    } 

Как можно скрыть кнопку удаления и редактирования на основе ролей пользователей в базе данных?

Answer 1

Я предлагаю использовать функцию ng-if для скрытия контента, который пользователь никогда не должен видеть.

На ваш запрос можно ответить разными способами. Но я попытаюсь объяснить полезный метод многократного использования.

<!-- From the html only call exact functions in your controller --> 
<div ng-controller="TestController as vm"> 
    <button ng-if="vm.hasEditRights()">Editbutton</button> 
    <button ng-if="vm.hasCreateRights()">Createbutton</button> 
</div> 

myApp.controller('TestController', ['$scope', 'UserService', 
    function($scope, UserService) { 

    var vm = this; 
    // The functions in the controllers define the actual rights for the functionality 
    vm.hasEditRights = function() { 
     // Check rights in the UserService with a list of roles that are allowed to this functionality. 
     // This way you can assign multiple roles to 1 functionality. 
     // Implement the UserService.hasRole function to check the role of the logged in user 
     // (if the user role is available in the list of roles given than the function will return true) 
     return UserService.hasRole([Role.PowerUser]) 
    }; 
    vm.hasCreateRights = function() { 
     return UserService.hasRole([Role.PowerUser, Role.Basic]) 
    }; 
}]); 

EDIT: Добавлен пример функции UserService.hasRole

var user; // represents the user object 
xxx.hasRole = function(allowedRoles) { 
    if (angular.isUndefined(allowedRoles)) { 
     return false; 
    } 
    if (angular.isUndefined(user) || angular.isUndefined(user.role)) { 
     return false; 
    } 
    return allowedRoles.indexOf(user.role) !== -1; 
} 

Answer 2

Ниже приведен пример для пользователя редактора для кнопки Edit рассмотреть, чтобы положить ваши внешние условия внутри, если это возможно, в противном случае делать, как показано ниже:

ng-hide="hideEdit(vm.viewmode === 1 || !vm.selected)" 

и в вашем угловом коде сделать вашу логику

$scope.hideEdit = function (outsideConditions) { 

    var currentUser = userServie.getUsers().currentUser() // get your user 
    if(!currentUser.Editor & outsideConditions) { 
     return true; // hide the button 
    } 
    else { 
      return false; //show the button 
     } 
    } 

надеюсь, что это поможет ура!

Answer 3

Нужна дополнительная информация, чтобы предоставить вам решение. Можете ли вы предоставить некоторые примеры данных, которые поступают из вашего вызова $ http? Вот базовое решение, которое вы можете сделать:

Обычно ваши данные должны содержать свойство различать рулон пользователя и использоваться для визуализации вашего представления. Теперь, если вы используете ng-show/ng-hide в этой ситуации, каждый может использовать инструмент проверки браузера и сделать его видимым и легко щелкнуть по вашей кнопке. Поэтому я предлагаю вам использовать шаблон там, чтобы в соответствии с вашей потребностью отображалось представление этой части. Дайте мне знать, если вам об этом поговорить.

Спасибо.