Permissions / ACLs in a JavaScript Client-Side Application

Question

If I have a front-end JavaScript application, then what is the best / general practice for handling permissions / ACLs. For example, I want to show / hide some elements, etc. Of course, this is not safe, but still at the level of representation, how can I control this.

I use BackboneJS (with Marionette) as a client side framework, so using jQuery, Underscore, etc.

I think about a high level, I can try to somehow disable some routes. Needs some research, but I could do Router.on("route", checkPermissions) .

Then at the presentation level, in order to hide / show the elements, ... still not sure how best to deal with it. I need to pass some permissions object to the model ...

Answer 1

I would create custom BaseModel / BaseCollection with modified parsing logic that would remove inaccessible attributes from the data layer. Later, you can transform this logic of hiding data to the server side transparently and get protection from production.

In terms of permission data, the _security attribute for Model / Collection classes would be a good place to declare it.

In views, use the conditional logic suggested by akoskm

Answer 2

To make the elements hidden / visible on the screen, I do inline checks in my template, something like:

 <% if (user.isInRole('ADMIN', 'MNGR')) { %> <li <% page == "store" ? print('class="active"') :'' %>> </li> <% } %> 

and added the following helper function to my user model to check permissions:

 isInRole: function (rr) { var self = this; $.each(rr, function(i) { if (rr[i] === self.currentRole) { alert('pass'); } }); } 

I assume this is safe enough, since the actual verification of the required permission happens again on the server side. Concealing some controls, I simply direct the user through the application and do not allow him to be confused with actions, since he does not have the necessary privileges.

With this approach, I never hide data that comes dynamically through REST services, only a static page element.