If I have a JavaScript front end application, what is the best/mon practice to handle permissions/ACL. For example, I want to show/hide some elements etc. Of course, its not secure, but still on the view layer, how can I control this.

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

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

Then on the view layer, to hide/show elements, ... still not sure how best to handle this. I need to pass in a some permissions object into the model ...

If I have a JavaScript front end application, what is the best/mon practice to handle permissions/ACL. For example, I want to show/hide some elements etc. Of course, its not secure, but still on the view layer, how can I control this.

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

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

Then on the view layer, to hide/show elements, ... still not sure how best to handle this. I need to pass in a some permissions object into the model ...

• javascript
• backbone.js
• permissions
• acl
• marionette

2 Answers 2

To make 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 inside my user model to check for the permissions:

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

I assume this is secure-enough, since the actual check for required permission happens again on the server side. By hiding some controls I'm just guiding the user through the application and not letting him to be confused him with actions for he/she doesn't have the required privileges.

With such approach, I'm never hiding data which dynamically es through the REST services, only static element of the page.

I'd create custom BaseModel/BaseCollection classes with modified parse logic that would remove unaccessible attributes from data layer. Later on you would be able to transfer this data concealment logic to server side transparently and get production-worth security.

As for permission data, _security attribute on Model/Collection classes would be a good place to declare it.

In views, use conditional logic as akoskm suggested