Angular-permission define permissions retrieved via API

Question

I am trying to use angular-permission to implement permission-based authentication but I don't know where to define those permissions which are retrieved from my back-end via API which requires token-based access.

First, let me give a bit background about how my app looks like. On my back-end, my system portal, I define permissions to allow different APIs to be called. Permissions won't change all the time. Only when I add new features(APIs), new permissions will be added. For example.

permission1: api1,api2,api3
permission2:api4,api5,api6
permission3:api7,api8,api9

On the front-end, customers login the front-end web portal and create customized roles themselves which group some permissions together, for example:

admin: permission1,permission2,permission3
auditor:permission 3

The angular-permission doc says (https://github.com/Narzerus/angular-permission/blob/development/docs/1-manging-permissions.md#multiple-permissions) I can use PermissionStore.defineManyPermissions to define permissions which are retrieved from API after user login. That's all clear.

So I have two modules. One is the Authentication module which handles user login. The other one is the Permission module which handles the permission validation. On the Permission module .run() phase, I define the permissions like this:

    var getPermissions = function () {
        var deferred = $q.defer();
        system.permissions.get(
            function () {
                return deferred.resolve(system.permissions._permissions);
            },
            function (error) {
                console.log("error if can't load permissions");
                console.log(error);
            }
        );

        return deferred.promise;
    };
    var loadPermissions = function () {
        var promise = getPermissions();
        promise.then(function (permissions) {
            var arrayPermissions = formatPermissionArray(permissions);
            //var arrayPermissions=['viewSeed','viewAuthentication'];
            PermissionStore.defineManyPermissions(arrayPermissions, checkPermission);

            console.log("from permission run service");
            console.log(arrayPermissions);

        }, function (reason) {
            console.log('Failed: ' + reason);
        }, function (update) {
            console.log('Got notification: ' + update);
        });
    };

    loadPermissions();

    var formatPermissionArray = function (sourceData) {
        var formatedPermissionArray = [];
        for (var i = 0; i < sourceData.length; i++) {
            formatedPermissionArray.push(sourceData[i].permissionId);
        };
        return formatedPermissionArray;
    };

But during the bootstrap of the app, this module already loaded and the arrayPermissions will be empty since user hasn't logged in yet.

I tried to use oclazyload to load the Permission module from the login controller of the Authentication module, that actually works but if user refresh/reload their page, the Permission module won't be loaded anymore.

I am new to web development and also new to AngularJs. Just a few months experience. I don't know if I am doing it in a complete wrong way.

My questions are:

1. The API for retrieving a permission list should require authentication? Since I will need to put those authentication on the UI-router routes. Anyone can see it anyway. If I should not protect that API, then my problem is solved.

2. If I should keep my api protected, how should I address the issues I described above and that is where to define the permissions for angular-permission and how to use API to retrieve the permissions.

I hope I have managed to describe my issues clearly. Any help or guidance are greatly appreciated.

Regards, Lola

Answer 1

I'm using angular-permission with angular-satellizer. PermRoleStore or PermPermissionStore needs to be in run block. You can add data to JSON WEB TOKEN add use it at the run block like I did.

$auth.getPayload()This function returns payload from JWT in localStorage. And in that payload it has data with role key which I saved in backend. I hope this helps your issue.

.run(function (PermRoleStore, $auth, Yollar) {
PermRoleStore    
.defineRole('ADMIN', function () {
  if($auth.getPayload()) {

  if ($auth.getPayload().data.role === 'ADMIN') {
    return true;
  }
  else {
    return false;
  }
}
else {
  return false;
}
});
PermRoleStore    
.defineRole('MODERATOR', function () {
  if($auth.getPayload()) {

  if ($auth.getPayload().data.role === 'MODERATOR') {
    return true;
  }
  else {
    return false;
  }
}
else {
  return false;
}
});
})