angular-shiro is an attempt to bring Apache Shiro to the AngularJS world.

angular-shiro is born out of the such simple needs as

• if the user is not an admin then this button must not be available
• if the user does not have that permission then he should not be able to do or access that action or resource

As Apache Shiro is all about those issues (and more), instead of reinventing the wheel, angular-shiro is strongly inspired, if not more, from its JAVA mentor.

Using bower

bower install angular-shiro --save

or by downloading project as zip

angular-shiro

• Load angular-shiro script

<script type="text/javascript" src="path_to_angular_shiro/angular-shiro.min.js"></script>

• Add angular-shiro module to your application module dependencies

angular.module('myApp', ['angularShiro', ...])

• Authenticate Subject/User to your application

subject.login(new UsernamePasswordToken('myLogin','myPassword')
    .then(function(data){  
        // do whatever you need on successful authentication
    }, function(data){
        // do whatever you need on authentication failure
    });

• Apply your authorization rules

// This button is visible only to authenticated Subject having the ADMIN role
<button 
    type="button" 
    class="btn btn-default" 
    ng-click="edit()"
    has-role="'ADMIN'">Edit</button>

As a demo is worth a thousand words, check out angular-shiro address book demo application

Authentication is Subject based.

The Subject is availbale for injection under the name subject.

You can make a login attempt for a Subject/user through the use of subject method login(token)

    var token = new UsernamePasswordToken('username','password');
    subject.login(token);

The default authentication mecanism is to send a POST request to /api/authenticate with the following post data :

{"token":{"principal":"username","credentials":"password"}}

The response returned from the backend have to be a json object that comply to the following structure :

{
	info : {
		authc : {
			principal : {
				// the Suject/User principal, for example
				"login":"edegas",
				"apiKey":"*******"
			},
			credentials : {
				// the Subject/User credentials, for example
				"name" : "Edgar Degas",
				"email":"[email protected]"
			}
		},
		authz : {
			// list of the Subject/User roles, for example
			roles:["GUEST"],
			// list of the Subject/User permissions, for example
			permissions:["newsletter:read","book:*"]
		}
	}
}

The authorization support is based on the same elements of Authorization as Apache Shiro.

Authorization can be done in 2 ways :

• Programmatically, in interacting directly with the current Subject instance
• Directives, in adding directives on UI elements

• has-role
• lacks-role
• has-any-role

• has-permission
• lacks-permission

angular-shiro offers the ability to define ad-hoc filter chains for any matching $location path in your application.

Use angularShiroConfig setFilter(path, filter(s)) to associate the filter(s) to the paths.

app.config(['angularShiroConfigProvider', function(config) {
    config.setFilter('/admin/**', 'roles["ADMIN","GUEST"]');
} ]);

For example,

config.setFilter('/admin/**','authc, roles["ADMIN"]');

declares that any path matching /admin or any of its sub paths (ex : /admin/user,/admin/user/profile) will trigger the authc, roles["ADMIN"] filter chain in that order.

or in other words

config.setFilter('/newsletter/*','perms["newsletter:read", "newsletter:edit"]');

declares that to access any path matching /newsletter or matching any of its first level sub paths (ex : /newsletter/:id) the Subject\User must be granted with the read or edit permission on the newsletter entity.

API documentation