Role Based Permissions

[thehereward]

We are using ng-admin in a situation where different admins are only allowed to administer different entities. For example some admins can only administer teapots whilst other admins can only administer toasters. (A third type of super admin can administer both teapots and toasters and set the roles of other admins.)

We already have out application set up with authentication. Authorization is looking a little more challenging. I suspect we have two options:

1. Write custom bootstrapping for angular
   • This would let us load our login code before configuring ng-admin and then configure ng-admin only with the entities the user has permission to administer. This seems like it should work but will almost certainly be rather unpleasant.
2. Write custom menus and dashboards to hide forbidden entities
   • Combined with security on our API of course.

I suspect we will be going for option 2 but I thought I would raise this in case:

1. Anyone has any bright ideas of easier ways to achieve this.
2. It helps anyone else with a similar problem in future.

Thanks 😄

[fzaninotto]

There was a proposal done on the demo quite a while ago: marmelab/ng-admin-demo#8

My opinion is that it's outside of ng-admin's scope to deal with roles and permissions. It shouldn't be too hard to plug your own logic in, though.

[beatelite]

@thehereward . Did you ever get this sorted? What did you end up doing? I'm working out the same issues right now.

[thehereward]

We ended up loading the currently logged in user as a constant before bootstrapping the application. After a successful login/logout we then restarted the entire application, so running the bootstrap again with an entirely new user.

This isn't particularly pleasing but it does work.

A (stripped down and anonymised) version of our bootstrap:

var app = angular.module('application-name', ['ng-admin']);

function loadInfoNeededBeforeBootstrap() {
    var initInjector = angular.injector(["ng"]);
    var $http = initInjector.get("$http");

    return $http.get("/api/pre_bootstrap").then(function (response) {
        app.constant("userInfo", response.data.userInfo);
    }, function (errorResponse) {
        app.constant("userInfo", {});
    });
}

function bootstrapApplication() {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ["application-name"]);
    });
}

loadInfoNeededBeforeBootstrap().then(bootstrapApplication);

[shershen08]

this works in principle but first gives error like
Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: userInfo