Roles and Permissions for Frontend App
You might have come across several articles on backend roles and permissions. They talk about numerous tools and techniques that restrict the authorization of various resources from the backend. Those are very generous and genuine approaches for user access to backend APIs and services. But what about the front-end? How do you manage the front-end components based on the user’s permission to access various entities? You need a granular level of control of the visibility of various parts of your front-end application.
With the rise of several frameworks such as Angular, React, and VueJS, it’s easier to manage an application's state. Based on this, one can define the visibility of the components. This might have made it easier but not simpler.
To make managing roles and permissions simpler and easier, we’ve built an Open Source library calledreact-rbac .
React RBAC has easy to use API for defining the permissions and controlling the visibility of the application components.
Install it with
npm install @impelsysinc/react-rbac
Built with Typescript and compiled using roll-up, it has easy access to types for providing type hints while using the library.
You can view the table-based test cases in Jest e.g. https://github.com/ImpelsysInc/react-rbac/blob/master/src/utils/canAccess.test.ts
The function canAccess2 is used extensively to check the permissions https://github.com/ImpelsysInc/react-rbac/blob/master/src/utils/canAccess.ts#L122
The library also exposes a WithPermission HOC that can help in showing or hiding the child components based on the permission passed as a param to the component.
The useRBAContext hook can be used in any functional component to access the canAccess and other essential methods. Please refer to the README file for more details about the usage https://github.com/ImpelsysInc/react-rbac/blob/master/README.md#using-userbac-hook
Here is an example of the usage of the library. (Open Sandbox to see code usage)
This article provides you with an overview of the library.
Do check out the documentation of the library https://impelsysinc.github.io/react-rbac/
Contribute to any open issues https://github.com/ImpelsysInc/react-rbac/issues
