FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

SimpliField/angular-reaccess: Adapt user interface depending on REST API authorizations. · GitHub

Latest commit

 

History

42 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

sf-reaccess

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.

Quick start

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

Debugging

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>

Contribute

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

Note for Express users

If you use Express for your backend, you may be interested by the express-reaccess middleware.

Stats

About

Adapt user interface depending on REST API authorizations.

Resources

Stars

11 stars

Watchers

14 watching

Forks

Releases

Packages

Used by

Contributors

Languages


Back | FazBrowse Home | New Git URL