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}}