[angularJS]How to use angular-acl?
Angular-acl is a service that allows you to protect/show content based on the current user's assigned role(s).
How to use angular-acl :
/* This is app.js */
var app= angular.module('app', ['ngRoute','mm.acl','LocalStorageModule']);
app.run(['AclService', function (AclService) {
// Set the ACL data. Normally, you'd fetch this from an API or something.
// The data should have the roles as the property names,
// with arrays listing their permissions as their value.
var aclData = {
guest: ['login'],
admin: ['loginout', 'can_admin']
}
AclService.setAbilities(aclData);
// Attach the member role to the current user
AclService.attachRole('guest');
}]);
app.config(function($routeProvider){
$routeProvider
.when('/',{
controller:'indexController',
templateUrl:'other.html',
publicAccess:true
})
.when('/home',{
resolve : {
'acl' : ['$q', 'AclService', function($q, AclService){
if(AclService.can('can_admin')){
// Has proper permissions
return true;
} else {
// Does not have permission
return $q.reject('Unauthorized');
}
}]
},
controller:'homeController',
templateUrl:'home.html',
publicAccess:true
})
.when('/admin',{
resolve : {
'acl' : ['$q', 'AclService', function($q, AclService){
if(AclService.can('can_admin')){
// Has proper permissions
return true;
} else {
// Does not have permission
return $q.reject('Unauthorized');
}
}]
},
controller:'adminController',
templateUrl:'admin.html',
publicAccess:true
})
.otherwise({
redirectTo:'/'
});
});
app
.controller('rootController', function($scope, AclService){
$scope.can = AclService.can;
$scope.title="root";
console.log("root controller");
$scope.login = function(){
console.log("login button is clicked");
AclService.attachRole('admin');
AclService.detachRole('guest');
}
$scope.loginout = function(){
console.log("login out button is clicked");
AclService.detachRole('admin');
AclService.attachRole('guest');
}
})
.controller('indexController',function($scope, AclService){
$scope.title="index";
console.log("inddex controller");
})
.controller('homeController',function($scope){
$scope.title="home";
console.log("teset controller");
})
.controller('adminController',function($scope){
$scope.title="admin hahahaha";
console.log("admin controller");
});
/* This is html */
<html ng-app="app">
<body ng-controller="rootController">
index:{{title}}
<hr/>
<div ng-view></div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-acl.js"></script>
<script src="js/angular-local-storage.js"></script>
<script src="js/app.js"></script>
<a href="#home">home</a><br/>
<a href="#other">other</a><br/>
<a href="#admin">admin</a><br/>
<input type="button" ng-click="login()" value="Login" ng-show="can('login')" />
<input type="button" ng-click="loginout()" value="Loginout" ng-show="can('loginout')" />
</body>
</html>
/* Other pages like admin.html */
admin:
{{title}}
标签: angularJS
评论：
2021-07-10 06:57
2021-07-06 22:58
日历
最新微语
- 有的时候，会站在分叉路口，不知道向左还是右
2023-12-26 15:34
- 繁花乱开，鸟雀逐风。心自宁静，纷扰不闻。
2023-03-14 09:56
- 对于不可控的事，我们保持乐观，对于可控的事情，我们保持谨慎。
2023-02-09 11:03
- 小时候，
暑假意味着无忧无虑地玩很长一段时间，
节假意味着好吃好喝还有很多长期不见的小朋友来玩...
长大后，
这是女儿第一个暑假，
一个半月...
2022-07-11 08:54
- Watching the autumn leaves falling as you grow older together
2018-10-25 09:45
分类
最新评论
- Goonog
i get it now :) - 萧
@Fluzak：The web host... - Fluzak
Nice blog here! Also... - Albertarive
In my opinion you co... - ChesterHep
What does it plan? - ChesterHep
No, opposite. - mojoheadz
Everything is OK!... - Josephmaigh
I just want to say t... - ChesterHep
What good topic - AnthonyBub
Certainly, never it ...
2021-09-24 19:04