[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
评论：
2022-01-12 05:36
2021-12-09 14:09
2021-10-22 11:06
日历
最新微语
- Watching the autumn leaves falling as you grow older together
2018-10-25 09:45
- 时间不可以倒流，但空间可以
2017-08-01 09:03
- 含羞草、电磁炮；汽车工业革命
2017-05-23 22:51
- 那个点子页面加几点：
去中心化的物联网通信协议
2017-05-09 22:13
- 有一种人怀疑阴阳的存在，另有一种人会怀疑1+1＝2的正确性……
2017-03-01 17:08
分类
最新评论
- 萧
@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 ... - DavidNed
I think, that you ar...
2022-05-18 18:13