rafaelvidaurre / angular-permission Goto Github PK

Hey @Narzerus,

Could you publish this package to NPM? It's crucial for everyone who uses alternative workflows such as browserify and webpack.

Thank you.

Should Permission stick to the provided keys on route configuration only and except?

Other ideas could be oneOf, instead of only which is more explicit on how the access is granted or denied.

@ankri I think a problem would be with except which would have to change too. and noneOf is easily mistaken with oneOf

Any ideas people?

Any plans to change this library to work with the new native router in Angular 1.4? Would be awesome imho =)

I'm using this module with in a project... I'm facing the issue that I need to redirect back to where the user intended after he sign in... but I can't figure that out

here is a snippet of the code to grasp what I'm trying to achieve

    .state 'user.confirm',
      url: '/auth/confirmations/:confirmationToken'
      templateUrl: 'app/auth/confirm_email.html'
      controller: 'ConfirmationCtrl'
      controllerAs: 'confirm'
      data:
        permissions:
          only: ['user']
          redirectTo: 'user.login' 

this is basically used with confirming user emails... If the user is not logged in ... he is redirected to login
but after he login... he is redirected to the home page not back to the url /auth/confirmations/:confirmationToken

In current (0.3.1) code, at line 58, I see the same test than in the resolve part:
if (!$rootScope.$broadcast('$stateChangeStart', toState, toParams, fromState, fromParams).defaultPrevented)

This can lead to reject the state change on the basis we want to go to toState, while we want the check to be done on the redirectTo state.

[EDIT] I am no longer sure of the validity of my issue...
Sorry for the noise, this probably should be closed.

To provide a better style foundation on code style to be followed in pull requests.

We should update jshintrc

Is there a way to use existing role set on angular-permission?
I want to hide some UI base on role.

Hi everybody,

I'm trying to write unit test to check my role definition,
here is my .run definition:

.run(function($q, Access_credential, Permission){
    var getRole = function(permission){
        var deferred = $q.defer();

        Access_credential.getCurrent().$promise
        .then(ac => {
            if(ac.role === permission){
                console.log(ac.role);
                return deferred.resolve();
            }
            else{
                return deferred.reject();
            }
        })
        .catch(err => {
            deferred.reject(err);
        });

        return deferred.promise;
    };

    Permission.defineRole('temp', () => {
        return getRole('temp');
    });
    Permission.defineRole('invalid', () => {
        return getRole('invalid');
    });
})

and here is my test:

'use strict';

describe('When checking for roles', function() {

    var Permission;

    beforeEach(function() {
        module('user');

        module('permission', function($provide){
            $provide.value('Permission', {
                defineRole: jasmine.createSpy()
            });
        });

        inject(function(_Permission_){
            Permission = _Permission_;
        });
    });

    it('should ', function(){
        expect(Permission.defineRole).toHaveBeenCalled();
    });
});

that for now is pretty unuseful... I would like to mock Access_credential.getCurrent() and trigger the defineRole function to check the expected results.

Any help is appreciated.

Thanks in advance

I'm thinking in redoing this package with fundamental changes now that I've learnt so much about how people are needing to control route access.

Please feel free to comment here things that you believe a possible re-write of Permission should have.

Things I think are missing:

• Redirection per Role
• A stronger paradigm, currently there's two different ways to use permission, one defining roles and one defining permissions (sort of). Which is confusing and foces the package in two opposite directions. The idea here would be to figure out a better way by which to define the actors used in Permission.
• Rename, Permission as stated in some issue somewhere, is to general of a name.

Your voice is head guys, post your suggestions here.

Hi,
When using angular-permission on the page displayed right after the login process, the user (Authentication.user) is not defined which causes the permission check to fail.

Is there any way to achieve the following?

authentication client controller

$scope.homeUrl = function () {
            $scope.signup = function () {
            $http.post('/auth/signup', $scope.credentials).success(function (response) {
                // If successful we assign the response to the global user model
                $scope.authentication.user = response;

                // And redirect to the index page
                $location.path('/myProtectedUrl');
            }).error(function (response) {
                $scope.error = response.message;
            });
        };

somewhere else in another module

angular.module('dashboard').run(['$rootScope', 'Permission', 'Authentication',
    // Definition of the roles used by the app router
    function ($rootScope, Permission, Authentication) {
        var user = Authentication.user;
        // HERE MY USER IS ALWAYS EMPTY
        Permission.('anonymous', function ($stateParams) {
                return (user === null);
            });
    }]);

BTW, I'm using the mean stack.

Thanks for your help!
tim

I've noticed almost all issues reported have to do with the redirection feature since ui-router's $stateChangeStart has a lot of issues.

I'd love to discuss with you guys a way to avoid using $stateChangeStart for redirects and state blocking.

Any ideas? If someone comes to a solution for this I'm thinking on giving commit priviledges since they would've built an important part of this library.

Hi, I have just started using your module and it has helped us a lot in managing permissions and I would love to help you improve this module. One of the things I found which could be an issue or a feature enhancement.

We have a requirement to check session on every route/state change. (If the server returns a 403/401 we log out the user using httpInterceptor). I am using the promises in the defineRole block as suggested by the readme.md but it does not wait for the promise to be resolved and renders the view. After the promise is resolved, the permissions start working and the page gets redirected to login which is wrong because the end users will see the view for a couple of seconds before it redirects.

From the readme,

.defineRole('user', function (stateParams) {
          // This time we will return a promise
          // If the promise *resolves* then the user has the role, if it *rejects* (you guessed it)

          // Let's assume this returns a promise that resolves or rejects if session is active
          return User.checkSession();
        })

Some guidelines will also be appreciated, I can try implementing the same and send in a PR. I read an article on implementing global resolve using ui-router, but that doesn't solve my purpose exactly because I need to add the resolve block to all states. http://www.jvandemo.com/how-to-resolve-application-wide-resources-centrally-in-angularjs-with-ui-router/ it might be of some help to you.

Since we're not using the data key to set permissions, children states cannot inherit custom data, and thus no permissions map.

Retrieve permission data from the data key instead of state object.

Hi,

I have problem with permission only array...

data: {
        permissions: {
          only: ['user', 'admin',]
         }
        }

it takes into consideration of first value only "user", just ignores second value "admin",
if i swap ["admin", "user"], it uses only "admin" not "user"..

is it right way to define?

Hello,
could you publish your library on NPM, as all angular core libraries are published as well so we don't have to support both bower and NPM ? :)

Is there a way to check for permissions inside a template?
Something like:

<div ng-if="ngPermission(['admin', 'moderator'])">
  Some restricted content
</div>

As a source of permission data, consider https://www.freeipa.org. It is a very robust and mature open source project that provides a users/roles/permissions control plane similar to what is provided by Microsoft AD, and in many cases exceeding it. I think it would be very helpful for users to see a demo connecting these important technologies to angular-permission.

In highly secure environments (i.e. anything that doesn't want to be hacked), it's important that the control plane is built on third party software, not ad-hoc by the members of the product development team. This allows someone with the role of Chief Security Officer to have a silo that is completely separated from the data silo that customer data is stored in. In this manner, an errant CSO cannot get access to customer data and an errant programmer cannot get access to usernames and passwords. This forms what is known as a "two man rule", requiring more than one person in conspiracy to retrieve actionable system data.

Exceptional deployments go so far as to make sure that all identifying information about users is stored in the security database (LDAP). A breach of the application data yields a completely anonymized database, even if the data is not encrypted. A breach of the security database provides no data about customers, only that they exist.

Would love to hear the thoughts of others on this!

I'm having a problem with permission inheritance that is caused by the way ui-router handles the inheritance of the data object. Consider the following scenario:

The route to /secure/ has the following permissions:

    permissions: {
        except: ['anonymous'],
        redirectTo: 'login'
    }

The route to /secure/administration/ has the following permissions:

    permissions: {
        only: ['admin']
    }

At this point, the /secure/administration/ route doesn't know how to handle users who are anonymous, because the parent permissions object has been overwritten. Is this a scenario that is addressed in the current angular-permission? If not, is this a scenario you would like to see addressed, or is this working as desired?

Hi, it would be awesome to have the possibility to force the redirection based on the failed permission check e.g.:

//...
data: {
    permissions: {
        only: ['user', {
                name: 'initialized',
                redirectTo: '/setup-user'
        }],
        redirectTo: 'login'
    }
}
// ...

What do you think? Or is this already possible and I haven't found it yet?

I figure out a problem, where you doesn't have an access to the state, then an object of the state isn't send just a string when redirectTo is set up. Also event isn't fired, and I think it should, because there we are changing a state, state should once again check perms of the new state, but they don't do it.

I'm having troubles after logout. Permission seems to think that the user still has the previous role.

Anyone had a similar problem?

I absolutely love this module. It saves me a lot of time and hassle. I found it browsing SO: http://stackoverflow.com/questions/22537311/angular-ui-router-login-authentication

Just my 2 cents:
Please consider finding a more appropriate name for the module. "permission" is too broad in my opinion.
Maybe something like

• "router-permission"
• "auth-route"
• "redirect-auth"

You get the idea. It's mainly to avoid confusing 2 modules with a close name in the jungle of angular modules.

Thanks again for your work

I've come across a few use cases where knowing what/which permission(s)/role(s) passed/failed would be quiet helpful.

Maybe passing currentRole into the promise rejection/resolution calls here would work?

https://github.com/Narzerus/angular-permission/blob/master/src/permission.svc.js#L82

I have a user with role "admin" and it has access to index page. When I delete a record from index page, I call $state.reload to refresh the data which is not working.

Hi,

sadly I didn't find a solution for this problem. Maybe you have an idea.

State change cannot be prevented with event.preventDefaults() when using the permission module.

I have two codepens to demonstrate the problem:
Working version without the module

If you tick the prevent state change button event.preventDefault() gets called on $stateChangeStart and the route doesn't change as is intended.

But with
Version with permission module

The route still changes. I suspect it has something to do with lines 32-35 in permission.mdl.js

            $state.go(toState.name, toParams, {notify: false}).then(function() {
              $rootScope
                .$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
            });

Sadly the permission module gets called before the $stateChangeStart of the Controller.

Do you have an idea how to fix this?

Greetings

Assuming MIT? Didn't see anything. Thanks!

It would be great if the library could distinguish between those two different states when it comes to redirect; i.e. have an authenticated user who is missing the required permission redirect to a page informing about the missing permission, whereas redirecting to a login page in case of a not yet logged in user.

In this discussion we will decide about the first directive for this module.

The first idea mentioned in other topics such as #28 is to create a directive which either shows or hide an element depending on a permission's resolution.

A possible approach could be:

<a sref="post.delete" rp-only="Admin" />Delete post</a>

<a sref="posts.index" rp-except="Anonymous" />View posts</a>

Feel free to contribute to this discussion, post your ideas and concerns.

Also have a look at #37 and see what you like and don't from it, get some ideas and whatnot

Cheers!

Hi.
I'm looking for something like this:

$stateProvider 
    .state 'dashboard',
        url: '/dashboard'
        views:
            "sidebar": templateUrl: 'views/dashboard/sidebar.html'
            "content": templateUrl: 'views/dashboard/content.html'
        data:
            permissions:
                only: ['authorized']
                redirectTo: 'loading'
                redirectToParams: {next: 'dashboard'}

When a state is found to be authorized, the code that allows the state to continue and broadcasts the success message.

However, we are getting an error '$$hashKey' not defined on state change. We traced it back to angular-permission line 49. In the source, you said this is a hacky fix that should be fixed in later versions on UI-router. Could this be the culprit?

Permission.defineRole('projectmanager', function(stateParams) {
       var deferred = $q.defer();

       $http.get('/api/managers').then(function(data) {
           var isPM = false;
           for (var i = 0; i < data.data.length; i++) {
               if (data.data[i].projectMgr == $rootScope.session.projectMgr) {
                   isPM = true;
                   break;
               }
           }
           if (isPM) {
               deferred.resolve();
           } else {
               deferred.reject();
           }
       }, function() {
           deferred.reject();
       });
       return deferred.promise;
   });

I was trying to create a PR to fix an issue I had, but I'm getting a testing error on the state params (only) and state params (except) cases, which I think are failing outside my code.

The scenario I have is:

• I have an abstract state (url: /company/:companyid).
• This has various child states, such as /login or /users.
• Some states (/login) are accessible to anyone, while others (/users) can only be seen after login.
• I wanted to use Permission to redirect to login or ^.login or company.login if the user has not been authenticated

The issue right now is, the redirect wipes out companyid from the state params, redirecting to /company//login, with no valid ID.

My fairly simple solution was to include toParams in place of the empty params object for the redirect:

57:              if (redirectTo) {
58:                $state.go(redirectTo, toParams, {notify: false}).then(function() {
                                         ^^^^^^^^

This seems to solve the issue for me, but I'm not sure that there isn't a negative to doing so.

Due to the fact that angular-permission completely stops and restarts every state transition, any options passed in (for example, via ui-sref-opts) are lost.

This means it's impossible to use angular-permission and do things like location: 'replace', because the option is lost.

This is a convenience feature request.

Problem: I have lots of roles, the user is either in them or not, there is no complex logic. An angular service is holding an array of all the roles the current user is in. Currently with angular-permissions, I have to define every role, and write essentially the same function for each one. I imagine this is a pretty common scenario.

Proposed Solution: Allow the developer to specify a "catch-all" validation function that is used for any undefined roles at the time the user tries to navigate to the route. It would need to differ slightly from the existing validation functions, in that it would need an input parameter stating the role name that is being checked for. But I think this would be a good addition to the existing validation functions anyway.

Instead of only

data: {
    permissions: {
        only: ['admins', 'users']
    }
},

it would be great to use also

data: {
    permissions: {
        only: customFunction($state)
    }
},

in order to separate acl definition and/or apply custom business logic rules. It would make access cotrol lists more maintenable.
Example:

var acl = {
  'admin': ['admin', 'moderators'],
  'admin.users': ['admin'],
  'admin.posts': ['admin', 'moderators'],
};

customFunction = function(state) {
    return acl[ state.name ];
}

Separate source code, tests and configuration in project into separate catalogs to make it cleaner and simpler to develop.

In order to unify implementation we can deprecate synchronous functions in favour of promise based functions, when providing validation functions in permission definitions. Can we do this @Narzerus?

Hey! This seems like an excellent module. I was a bit curious as to the best way to say, show or hide navigation items (or anything else in the DOM) based on roles. Does this module have any impact on that, or can such information be determined based on states alone (from ui.router)?

Thanks a ton.

A way of defining all the roles at once. Equals to the current Permission.defineRole but we sould be able to pass an array to resolve and reject of which roles were accepted and rejected.

I want to give merge rights to one or two people. If anyone's interested, email me at [email protected] and let me know why should I pick you 👍

Cheers

I am using angular devise and angular-permission, while implementing i am facing issues.

 var app = angular.module('som', ['ui.router','permission']);
app.config(function($stateProvider, $urlRouterProvider) {
                $stateProvider
                    .state('login', {
                        url: '/login',
                        templateUrl: 'login.html',
                        controller: 'loginCtrl'
                    }).state('dashboard', {
                        url: '/dashboard',
                        templateUrl: 'dashboard.html',
                        controller: 'dashboardCtrl',
                        data: {
                            permissions: {
                                only: ['admin']
                            }
                        }
                    }).state('users', {
                        url: '/users',
                        templateUrl: 'users.html',
                        controller: 'userCtrl',
                        data: {
                            permissions: {
                                only: ['admin'],
                                redirectTo: 'dashboard'
                            }
                        },
                        resolve: {
                            postPromise: ['UserService', function(UserService) {
                                return UserService.getAll();
                            }]
                        }
                    })
                $urlRouterProvider.otherwise('login');
            }
        );

app.run(['Permission', 'Auth', 'userService', function(Permission, Auth, userService) {
            //defining the anonymous role
            Permission.defineRole('anonymous', function(stateParams) {
                Auth.currentUser().then(function(data) {
                    return false;
                }, function(err) {
                    return true
                });
            });
            //define manager role
            Permission.defineRole('admin', function(stateParams) {
               return Auth.currentUser().then(function(user) {
                    userService.getMyRole(user.id).then(function(response) {
                        var user = response.data;
                        console.log("current user role : " + user.role_name);
                        if (user.role_name == "admin") {
                            return true;
                        }else{
                            return false;
                        }
                    });
                }, function(err) {
                    return false
                });
            });
            //define the admin role
            Permission.defineRole('manager', function(stateParams) {
               return Auth.currentUser().then(function(user) {
                    userService.getMyRole(user.id).then(function(response) {
                        var user = response.data;
                        console.log("current user role : " + user.role_name);
                        if (user.role_name == "manager") {
                           return true;
                        }else{
                            return false;
                        }
                    });
                }, function(err) {
                    return false;
                });
            });
        }]);

the problem is as a admin or manager , he can able to access dashboard. and also as a manager he can access $state users.

When I define a role using a promise with HTTP request, if there is a network problem, the promise will reject, but the permission will keep making requests. How can I stop this?

Permission
        .defineRole('anonymous', function(stateParams) {
            if (!User.getLocalIdentity()) {
                return true;
            }
            return false;
        })
        .defineRole('user', function(stateParams) {
            if (!User.getLocalIdentity()) {
                return false;
            } else {
                return User.isLogin();
            }
        });

Hello,

just trying to help a bit and i'm quite new in this world. But should it be a good idea to return alert message when an access is denied by permissions ?

By the way it's a very nice module ;) thanks you for this.

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Error</title>
    <script src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <script src="https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
    <script src="https://rawgit.com/Narzerus/angular-permission/development/dist/angular-permission.js"></script>
    <script src="/module.js"></script>
</head>
<body ng-app="app">
    <ui-view />
</body>
</html>

angular.module('app', ['ui.router', 'permission']).run(function (Permission, $timeout, $q) {
  Permission.defineRole('role1', function () {
    var deferred = $q.defer();
    $timeout(function () {
      deferred.reject();
    }, 3000);
    return deferred.promise;
  });
}).config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('main', {
      url: '/',
      template: 'text',
      data: {
        permissions: {
          except: ['role1']
        }
      }
    });
});

This is very simple example. When I try to navigate to /hhh (not existed state) it does multiple redirects
Where is error?

$rootScope.$on('$stateChangePermissionDenied',
function (toState, toParams) {
console.log(toState);
console.log(toParams);
});

i am not getting the correct toParams.I am getting a completly different object.

oddly enough ( dont ask me why ) the third parameter is the toParams object.

try this

$rootScope.$on('$stateChangePermissionDenied',
function (toState, toParams, third) {
console.log(toState);
console.log(toParams);
console.log(third) // this contain route params.
});

the code is very simple.Here in the angularpermission.js we see the following:

$rootScope.$broadcast('$stateChangePermissionDenied', toState, toParams);

Should we extend the module with caching options or should everyone that uses this module do caching for themselves?

I need show link with ui-sref="resource.create" only if I have permission.

There is any way to do it?

Very interesting module.

I feel it lacks one major feature though, since you're not able to set permissions on user basis.

Example:

data: {
  permissions: {
    // Ok, we allow admins the access.
    only: ['admins'], 

    // What we are not able to do actually is check 
    // whether a single user has a set of given permissions,
    // regardless of his roles.
    permissions: ['publish.content'] 
  }
},

I think this would be a great feature to add in.

Should add minification to production code. Right now it is pretty easy to mistake development code with production code in PRs

Hi,

I'm trying this module and it looks pretty nice :)
A bit further in, I noticed that if I set the permission on an abstract parent state, it is not checked.
Is this behavior not supported, or am I doing it wrong?

Thanks,
Jelke

Hello,
I figure out new problem an infinite loop. When it happen?

Let's say that we have some abstract state app with default permissions for rest of the states

$stateProvider.state('app', {
            abstract: true,
            data: {
                permissions: {
                    only: ['user'],
                    redirectTo: 'auth.login'
                }
            }
});

Then create some state fe: app.start

$stateProvider
            .state('app.start', {
                url: '/start',
                views: {
                    'some@app': {
                        // ble ble ble
                    }
                },
                data: {
                    title: 'Start'
                }
            });

It inherit perms from state app

Then, we need an authorization for our app, so create an auth state with state auth.login

$stateProvider.state('auth', {
            abstract: true,
            data: {
                permissions: {
                    except: ['user'],
                    redirectTo: 'app.start'
                }
            },
            views: {
                // bla bla bla
            }
        }).state('auth.login', {
            url: '/login',
            views: {
                // bla bla bla
            },
            data: {
                title: 'Login',
                htmlId: 'extr-page'
            }
        });

After this when you point your web browser to the root of the app fe: localhost:1337 they will do an infinite event loop, from state app.start to auth.login and back.

How looks a defineRole of the user?:

Permission.defineRole('user', function() {
            return user.checkSession();
        });

where user is an service with checkSession function that returns promise.

I just debug it, and it looks like it check that user (not logged, anonymous) have an permissions to app.start and he doesn't have of course, then is called state.go (because redirectTo is set up) to auth.login, an event is fired once again (due to my changes in #30 ) and then there are checked perms once again for state auth.login user is not authorizated, but permissions for auth.login is except user, so checkSession returns false, and process of Permission.authorize goes it returns resolve promise, but after this event is fired once again (have no idea why, maybe it's a bug in angular-ui-route [my version is: v0.2.11]). I have also check it on stock version of your code, and it happens exactly the same way.

Anyway, an fix is a remove event.preventDefault() from an your module, I will provide an pull request.