crAcl is Access Control List module for AngularJs. It works with UI-Router letting you to restrict the access of specific routes to a set of roles.

You can use bower

bower install cr-acl

add to your html:

<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="bower_components/cr-acl/cr-acl.js"></script>

then inject it in your app:

angular.module( 'ngtest', [ 'ui.router', 'cr.acl' ] )

There are two fathers of all roles: ROLE_USER for authenticated users and ROLE_GUEST for anonymous users. You can set a role hierarchy configuration.

.run(['crAcl', function run(crAcl) { crAcl.setInheritanceRoles({ "ROLE_CUSTOMER" : ["ROLE_USER"], "ROLE_CLIENT" : ["ROLE_CUSTOMER", "ROLE_USER"] }); }])

In this exaple the role ROLE_ADMIN if over ROLE_CUSTOMER (that's father of ROLE_USER) and ROLE_USER.

Whenever you want (for example after a successful login action) you can set the role of a user with crAcl service (inject it into your controllers, services, directive...):

$scope.login = function(){ crAcl.setRole("ROLE_USER"); };

Default role is ROLE_GUEST

If your user is not allowed for this route triggers a redirect to unauthorized state. You can override it in the run:

.run(['crAcl', function run(crAcl) { crAcl.setRedirct("your-login-state-name"); }])

Now you can set a list of granted role for single state:

.config(function config($stateProvider ) { $stateProvider.state('home', { url: '/home', views: { "main": { controller: 'HomeCtrl', templateUrl: 'home/home.tpl.html' } }, data:{ is_granted: ["ROLE_USER"] } }); $stateProvider.state( 'dashboard', { url: '/dashboard', views: { "main": { controller: 'DashboardCtrl', templateUrl: 'home/dashboard.tpl.html' } }, data:{ is_granted: ["ROLE_ADMIN"] } }); })

In this example, the home route is accessible by both ROLE_CUSTOMER and ROLE_ADMIN (because that roles extend ROLE_USER) and the dashboard route is accessible only by ROLE_ADMIN.

You can prevent compilation of specific DOM components with the cr-granted directive:

<div cr-granted="ROLE_ADMIN">Hello Admin!</div>

This directive supports multiple roles:

<div cr-granted="ROLE_CUSTOMER,ROLE_SUPPORT,ROLE_GUEST">Hello guys!</div>