Role based views using css and javascript

In web applications, role based views are normally done using server side if..else tags etc. When developing pure javascript clients, one way of doing role based views is again using javascript conditionals. This approach suffers from the fact that role-related code is scattered throughout the document. Another simple way to achieve the same is using css classes.

Let us assume that we have three roles, ADMIN and USER and GUEST. Then we will define three css classes as follows:

Could not embed GitHub Gist 1369451: API rate limit exceeded for 103.115.8.6. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

Now consider the following html doc, that has css classes attached to elements according to the current user’s role.

Could not embed GitHub Gist 1369451: API rate limit exceeded for 103.115.8.6. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

At this stage if you load the document in a browser, you will not see anything as nothing all the roles are invisible. So lets spruce this up with a bit of javascript to set proper css class properties.

Could not embed GitHub Gist 1369451: API rate limit exceeded for 103.115.8.6. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

If a cookie role is set that represents the current user’s role then adding the above snippet of code will enable all the elements tagged with css class .role_{roleCookie} to be visible.

Even though this is a very simple implementation, we can modify it easily to take into account more complex scenarios. For example, if you have completely ordered role based visibility (access level), i.e. given role R1 and R2, we can always tell which role has more visibility, then we can extend as follows:

Could not embed GitHub Gist 1369451: API rate limit exceeded for 103.115.8.6. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

Caution: One thing to note here is that all the parts of the document are sent to all the users, only what is visible on the browser is role based. So, server side authorisation checks will always be there as nothing stops a suspecting user from looking into the source and firing that dreaded request.