mikemclin / angular-acl Goto Github PK
View Code? Open in Web Editor NEWRole-based permissions for AngularJS
Role-based permissions for AngularJS
hi,
i want to use user role permissions is like: userrole -> module -> permissions.
for Example
Thanks,
Sachin Saini
From your comment, this link http://stackoverflow.com/questions/1181575/javascript-determine-whether-an-array-contains-a-value/1181586#1181586
now provide a better solution:
Edit after a long time: It's best not to patch the prototype of native primitives in JavaScript. A better way:
var indexOf = function(needle) {
if(typeof Array.prototype.indexOf === 'function') {
indexOf = Array.prototype.indexOf;
} else {
indexOf = function(needle) {
var i = -1, index = -1;
for(i = 0; i < this.length; i++) {
if(this[i] === needle) {
index = i;
break;
}
}
return index;
};
}
return indexOf.call(this, needle);
};
You can use it like this:
var myArray = [0,1,2],
needle = 1,
index = indexOf.call(myArray, needle); // 1
.when('/manage', {
resolve : {
'acl' : function(AclService){
if(AclService.can('manage_content')){
// Has proper permissions
return true;
} else {
// Does not have permission
return $q.reject('Unauthorized');
}
}
}
});
This is really useful module, any plans for implement this using angular 2
Hi Guys,
in the readme has example to protect a route, I tried and not funcinou, so I made some changes and is now working.
will example if someone needs, using $ routeChangeError
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
console.log(rejection);
if(rejection === 'Unauthorized'){
$location.path('home');
}
});
Att.
I'm trying to use AclService.resume() as the example, but when I need reload the ACL data form web it resolves after the routeProvider resolves and denied the access.
Is there some way to prevent the routeProvider resolves until the ACL is successfully loaded?
Hi.
I am using AngularUIRouter. I assign a role to a user based on the user type, say I have two types X and Y. Consider two users, A and B, of type X and Y respectively. Now when user A logs in, he is properly assigned the role X and if I try AclService.can('somethingThatOnlyXCanDo')
, I get 'true
'. Now when A logs out and B logs in, AclService.can('somethingThatOnlyXCanDo')
still gives me true
, when It should actually be false
. I have to hard refresh the app to get the correct value.
Is there an issue with Angular UI Router or am I forgetting something?
So I'm getting close to a release of an app and am starting to go through and protect content/routes using your acl tool. So far so good.
I get all the roles and capabilities part in the acl directive. I even have my server as the final authority on submitting content. If a user doesn't have a role with the proper permissions, they can't see content or see the "edit" link.
//begin dumb question
My question: How do I recognize "is owner" in acl?
For example: I have a form that updates a user's profile (validated on the server). It's hooked up properly so the server knows who's logged in. However, people can view other people's profile on the site but the form should only show when they are viewing/editing their own profile.
I can't just give the 'current user' the ability to see the form because then anyone logged in and visiting anyone else's profile will see the form.
Roles don't seem to make sense here either.
/dumb question
I'm sure I'm missing something. I've been up since 2am so my cognitive focus is about as good as a baby in a strip club.
Let me know if that makes sense or not. Appreciate any advice.
I'm newish to angular but I swear I'm hooking it up right.
I have the script set in the head and the ['mm.acl']
declared in on my app.
my app.js file:
'use strict';
angular.module('app', [
'ui.bootstrap',
'ui.router',
'ui.utils',
'oc.lazyLoad',
'ngResource',
'mm.acl'
]);
I have the following example in in my main.js file:
angular.module('app')
.run(['AclService', function (AclService) {
// Set the ACL data. Normally, you'd fetch this from an API or something.
// The data should have the roles as the property names,
// with arrays listing their permissions as their value.
var aclData = {
guest: ['login'],
member: ['logout', 'view_content'],
admin: ['logout', 'view_content', 'manage_content']
};
AclService.setAbilities(aclData);
// Attach the member role to the current user
AclService.attachRole('admin');
}]);
I have the example in my controller.js
app.controller('DemoCtrl', ['$scope', 'AclService', function ($scope, AclService) {
$scope.can = AclService.can;
$scope.id = 22;
$scope.title = 'My Demo Title';
}]);```
and the markup in my view.html (and yes the controller.js is loading on this page)
```<h1>{{ title }}</h1>
<a ng-href="edit/{{ id }}" ng-show="can('manage_content')">Edit</a>
When console.log(AclService.can());
- I get false.
When I console.log(AclService.hasRole());
- I get false
When I console.log(aclData);
- I see the object.
The role is set to admin so I expect that I'll see the edit button but I don't. Why? What am I missing?
My application works with own API server, and i already have, ACL in server side. But i want add some ACL on front-end (hide some buttons with actions etc). And i fond your module.
But i need initialise ACL after i enter login and password and fetch data from server.(when angular application is working NOT when on config or run part of lifecycle )
Is there any way to do this?
there is an error in the documentation on protection route, you need to close a parenthesis in the condition
if(AclService.can('view_content')){
Hi Mike,
Can i use it in an application using ui-router for routing.
Regards
Amrinder
I got this error 'Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.' when web storage is disabled.
Could you check if web storage is supported, if not disable all functions or have other treatments?
Could be possible to add nested abilities? so for example:
An user as member can view_content but only from page1, 2 & 3.
This is just an example, I wonder if you have thought in the possibility to add this feature.
var aclData = {
guest: ['login'],
member: ['logout', { view_content: ['page1', 'page2', 'page3']}],
admin: ['logout', 'view_content', {manage_content: ['page8', 'page9', 'page10']}]
}
Thanks!
I'm newish to angular but I swear I'm hooking it up right.
I have the script set in the head and the ['mm.acl']
declared in on my app.
my app.js file:
'use strict';
angular.module('app', [
'ui.bootstrap',
'ui.router',
'ui.utils',
'oc.lazyLoad',
'ngResource',
'mm.acl'
]);
I have the following example in in my main.js file:
angular.module('app')
.run(['AclService', function (AclService) {
// Set the ACL data. Normally, you'd fetch this from an API or something.
// The data should have the roles as the property names,
// with arrays listing their permissions as their value.
var aclData = {
guest: ['login'],
member: ['logout', 'view_content'],
admin: ['logout', 'view_content', 'manage_content']
};
AclService.setAbilities(aclData);
// Attach the member role to the current user
AclService.attachRole('admin');
}]);
I have the example in my controller.js
app.controller('DemoCtrl', ['$scope', 'AclService', function ($scope, AclService) { $scope.can = AclService.can; $scope.id = 22; $scope.title = 'My Demo Title'; }]);
and the markup in my view.html (and yes the controller.js is loading on this page)
<h1>{{ title }}</h1>
<a ng-href="edit/{{ id }}" ng-show="can('manage_content')">Edit</a>
When console.log(AclService.can());
- I get false.
When I console.log(AclService.hasRole());
- I get false
When I console.log(aclData);
- I see the object.
The role is set to admin so I expect that I'll see the edit button but I don't. Why? What am I missing?
Hi Mike McLin,
I saw a new release tag 0.1.8 with some of the following features,
But, I didn't see code related to this in master branch.
that's just a minor optimization, but Acl will use a lot the indexOf
query to determinate whether an user can or cannot access a page/ do something.
Mind changing the loop to increase a bit the performance ?
http://jsperf.com/fastest-array-loops-in-javascript/295
I'd recommand:
var l = arr.length;
for(;l--;) {
someFn(arr[l]);
}
postLoop();
I have server-side verification but I'd still like to use ng-if vs ng-show like your example.
in my $scope I have console.log(AclService.can('manage_content'));
This returns true and the <a ng-show="can('manage_content')">Edit</a>
shows the hidden Edit button.
However, when I try <a ng-if="can('manage_content')">Edit</a>
nothing shows.
I'm pretty sure I'm doing it correctly but can't get it to work. Any suggestions?
I have small problem. In UI I use your code for permissions and I always need to reload page to get correct permission.
I set
AclService.setAbilities(aclData);
and in angularJS UI I am checking this permission
ng-show="can('VolumeChanges/All/VolumeHistory/Show')"
but works only when I refresh page?
Did I miss something?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.