crAcl

Overview

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.

Install

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'
        ]
)

Role configuration

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.

Assign role to users

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");
}])

Restrict route access

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.

Directive

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>