https://github.com/alxpez/authorized-roles
Angularjs directive for layout control based on roles
https://github.com/alxpez/authorized-roles
angularjs conditional-rendering directive role-based-element-display
Last synced: about 1 month ago
JSON representation
Angularjs directive for layout control based on roles
- Host: GitHub
- URL: https://github.com/alxpez/authorized-roles
- Owner: alxpez
- License: mit
- Created: 2017-05-03T05:48:20.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-09T01:13:19.000Z (almost 9 years ago)
- Last Synced: 2026-01-24T04:47:18.846Z (2 months ago)
- Topics: angularjs, conditional-rendering, directive, role-based-element-display
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# authorized-roles
[AngularJS](https://github.com/angular/angular.js) directive for layout control. Show or remove elements based on the logged user 'roles'.
### Install
Choose your flavour
* `npm install authorized-roles`
* `bower install authorized-roles`
and add authorized-roles.js (or .min) to your index.html
### Usage
* Add the `alpez.authorizedroles` directive to your application module:
```javascript
angular.module('sampleApp',['alpez.authorizedroles']).config(AppConfig);
```
* Inject `authorizedRolesService` to populate its `roles` array with the roles of the currently authenticated user. It makes sense to do this at the very beginning of your app initialization, in your main controller:
```javascript
angular.module('sampleApp').controller('MainControler', MainControler);
MainControler.$inject = ['authorizedRolesService'];
function MainControler(authorizedRolesService){
function saveUserRoles(loggedUserRoles){
authorizedRolesService.roles = loggedUserRoles;
}
}
```
> Note that "authorizedRolesService.roles" has to be populated with an array of (one or more) strings.
* Use the authorized-roles attribute on the HTML elements that you want to show/remove based on the roles previously inserted
> This button will be visible for users with the role "ADMIN" (or to put it in other words, the directive will remove the button element if no role "ADMIN" is found among the user roles):
```html
THE ADMIN BUTTON
```
> As soon as one the roles set in the attribute matches any of the logged user roles, the element won't be removed from the DOM.
```html
I am visible for any of these roles
```
### Dependency
Note that authorized-roles depends on [AngularJS](https://angularjs.org/) and therefore it must be added to the project, as well as its corresponding `` tags before `dynamic-table`'s one