Question

早上好开发人员，

我已被指示将用户角色分配给特定视图。我有三个角色：

高级用户（可以编辑，可以删除）
查看者（无编辑，无删除）
基本（无编辑）

这是我在代码中得到的：

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

编辑：添加了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

下面的

是编辑按钮的编辑用户的示例如果可能，请考虑将您的外部条件置于内部，否则请执行以下操作：

 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，那么任何人都可以使用浏览器的检查工具并使其可见，并且可以轻松地单击您的按钮。所以我建议你在那里使用模板，这样根据你的需要，该部分的视图将呈现。如果您有任何关于此问题的讨论，请告诉我。

感谢。

基于用户角色的Ng-hide或ng-show

3 个答案: