Best way to do Client side authorization for a single page JavaScript application?

Question

I already have a solid back-end permissions authorization (ie. admin can perform an action, a normal user cannot perform an action). However, I'm wondering if there is a better way to do a frontend authorization for my single page JavaScript application then fetching a permission from the API every view.

Seems like I could:

a. Have a global way to tell what kind of user it is?

• I could do this but if permissions change in the backend I'd have to update who can view what on the front end.

b. Check permissions on every view?

• Just seems like a lot of API requests

c. Create a separate app for a Dashboard?

• That way I could know all the user's current permissions without a normal user getting back there looking around.

I may have answered my question with c but if anyone thinks of a better idea I'd like to hear it.

Answer 1

It depends on what you mean by "permissions". I will present some ideas with an example with User and Project resources.

If the permissions are independent of a given Project, then you are really talking about the User having a role (e.g. admin). This can be encoded in the API representation of that User.

If the permissions are dependent on the underlying resource (e.g. a User can have different permissions for a given Project) these can reside in the API representation for that resource. This has the pro that you don't need a huge dictionary of all of a user's permissions and the con that any caching of that resource need to be user specific. This may be an acceptable trade off.

You still have a potential usability issue with stale data if someone loads a view and their permissions for the viewed resource change before they attempt an action. One way to try to mitigate this is to use websockets to push updates to viewed resources to try and reduce the window during which the UI will be out of date with the backend database.

Answer 2

There are a many options to do that. I've used an approach that consists on:

• Call API to get the authorization list when the page is loaded for the first time; Cache the results.
• Before routing to a view call API that query the last update of user grants returning only the timestamp.
• If there is change, call API to get the authorizations updated after the timestamp of the last change.

Answer 3

One approach would be to save all the user's permissions into local storage, build a wrapper around that and display/hide stuff base on what he or she can do.

Answer 4

One solution is to generate an sign (as in asymmetric cryptography) an authorisation token on the server-side, since it's signed, it cannot be tampered with as an attacker doesn't know the private key.

i.e. You token might look something like:

id: userId
type: type of user
privileges: {
    privilege1,
    privilege2
}
expiry: some time in the near future, after which your app should request a new token

You would then sign this on the server, using a private key. The freely distributed public key allows anyone to verify that the server was the one who issued the token, and thus your javascript app can safely use the token to determine what the user has access to.