javascript - Best way to show/hide a part based on permission level - Angular JS -
i have angularjs single page application there lot of html blocks show users based on permission levels.
the user permission determined service
calls , value set based on permission.
$scope.permission = 'admin'
i can use ng-hide/show
directives hide blocks based on permission. worried security. changing css display
property not authorized can view blocks.
the other option ng-if
, using currently. know whether should same routing
, more secure, believe. can use ui.router
angular module acheive this. right way?
should use ng-hide/show
, ng-if
or routing
?
expecting thoughts.
any appreciated. in advance.
you should create directive such purpose:
app.directive('checkpermissions', ['permissionsservices', function(permissionsservices) { return { restrict: 'a', link: function(scope, elem, attrs, ctrl) { if (attrs.permissions != '') { var haspermission = permissionsservices.hasaccess(attrs.checkpermissions); if (false == haspermission) { elem.remove(); } } else { elem.remove(); } } }; }]);
html section
<a href="http://some_url" check-permissions="state1.name1" >some url</a> <a ui-sref="state2.name2" check-permissions="state2.name2">state 2</a> <button ng-click="state3.name" check-permissions="state3.name3">state 3</button>
permissionsservices.hasaccess() function in permissionsservices service check if user has access particular state of application. might using angular router or ui router handling states. using ui router code in function below. function return true or false.
permissionsservices.hasaccess = function(statename) { var hasaccess = false; //some complex checking algorithm based on requirement hasaccess = true return hasaccess; };
hope helps!!
Comments
Post a Comment