AngularJS tools to customize users interfaces based on their rights on the REST API.
See those slides to know more about the
reaccess
project principles.
Consider the following template:
<button
ng-show="'USER_ADD' | sfReaccess"
ng-click="addUser()">Add a user</button>
<div ng-repeat="user in users">
{{ user.name }}
<button
ng-show="'USER_EDIT' | sfReaccess:user"
ng-click="editUser(user)">Edit this user</button>
<button
ng-show="USER_DELETE' | sfReaccess:user"
ng-click="removeUser(user)">Delete this user</button>
</div>
It will display add/edit/delete buttons depending on the user rights comparing to the methods and pathes set for the given predefined rights.
Predefined rights are set in your application configuration like this:
angular.module('myApp')
.config(['sfReaccessServiceProvider', 'profileService', function(sfReaccessServiceProvider) {
// Setting templated rights
$sfReaccessServiceProvider.setPredefinedRights({
'USER_ADD': [{
path: '/users/:id',
methods: ['GET', 'POST']
}],
'USER_EDIT':[{
path: '/users/:id',
methods: ['PUT']
}],
'USER_DELETE': [{
path: '/users/:id',
methods: ['GET', 'DELETE']
}]
});
}]);
User rights are set by using the sfReaccessService.setRights()
method,
they look like this:
sfReaccessService.setRights([{
path: "/users/:_id/?.*",
methods: [
"OPTIONS",
"HEAD",
"GET",
"POST",
"PUT",
"PATCH",
"DELETE"
]
},{
path: "/organisations/:organisation_id/?.*",
methods: [
"OPTIONS",
"HEAD",
"GET",
"POST",
"PUT",
"PATCH",
"DELETE"
]
}]);
Path values are templated regular expressions. To set objects where to search
for template expressions values, use sfReaccessService.setValues()
:
sfReaccessService.setValues([{
_id: 1,
organisation_id: 1
}]);
You can enable sfReaccess debug mode globally:
angular.module('myApp')
.config(['sfReaccessServiceProvider', function(sfReaccessServiceProvider) {
// Set debug mode
$sfReaccessServiceProvider.debug(true);
}]);
Or locally as an argument to the angular filter:
<button
ng-show="'USER_ADD' | sfReaccess: undefined : true"
ng-click="addUser()">Add a user</button>
To contribute to this project, first run the following to setup the development environment:
npm install
bower install
Then, run the tests and debug with Karma:
npm run dev
If you use Express for your backend, you may be interested by the
express-reaccess
middleware.