Permissions/ACL in a JavaScript Client Side App

Question

If I have a JavaScript front end application, what is the best/common 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 ...

Answer 1

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 comes through the REST services, only static element of the page.