ユーザーロールに基づくNg-hideまたはng-show

Question

おはようの開発者

ユーザーロールを特定のビューに割り当てるように指示されました。私は3つの役割ました：これは私が得たもの

• パワーユーザー（編集することができ、削除することができます）
• ビューア（ノー編集、なし削除）
• 基本（無編集）

ですコード内：

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

は、そうでない場合は以下のように行い、可能であれば内部であなたの外の条件を置くことを検討 [編集]ボタンのエディタのユーザーのための例です：

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を使用すると、誰でもブラウザの検査ツールを使用して表示させることができ、簡単にボタンをクリックすることができます。だから私はあなたのニーズに応じて、その部分のビューがレンダリングされるようにテンプレートを使用することをお勧めします。あなたがこれについて議論することがあれば教えてください。

ありがとうございました。