During the early days of my career as Software Engineer, when I was tying to built an Angular based single page application, I started to search various ways to perform authorization for front-end of single page applications. I found that mostly engineers are doing front-end authorization based on back-end Apis.

For example, if a role or a user has access to can_edit_users Api, only then the update action can be enabled on a grid on front-end side of the application. One big disadvantage of this approach is that the actions on front-end which does not ping back-end Api cannot be authorized. In this article, I am going to discuss another way of adding front-end authorization which I call Bottom-to-Top Component based permission model.

---

Suppose we have different front-end components that we are using in our single page application. Each component will have a separate set of actions which a role or a user can perform. Because each component has its own set of actions, we should assign separate permissions set to that component. For example, let’s assume we have a Grid component. In this grid, a user can list, edit, delete, paginate and search some data.

Now based on above listed actions, we can create a permissions set which will help in authorization of these actions.

Permissions Set:
can_list
can_edit
can_delete
can_search
can_paginate

Now, because they are part of Grid Component, Grid should be added before each of these permissions, so that they do not overlap with permissions sets of other components.

Complete Grid Permissions Set:
Grid.can_list
Grid.can_edit
Grid.can_delete
Grid.can_search
Grid.can_paginate

#javascript #front-end-development #react #single-page-applications #authorization