React: Role Based Access Control (RBAC) - 401-advanced-javascript-jv/seattle-javascript-401d30 GitHub Wiki

Role-based access control (RBAC) is a means of controlling access and abilities given to users by using roles which are assigned to those users. A server can send out a list of abilities given to a user by the server, and the front-end React app can use that list to decide what and how to render. This list can come through either within the token (if the token has no sensitive information) and be decoded on the front-end, or the list can come through after or with the token (if the token has sensitive information.

This can be achieved in multiple ways, but a good way is to use two contexts: Login, and Auth.

Login context would be used to handle logging in and out, and would implement a Basic Auth method of user authentication--username and password, passed in to the server. Auth context would be used to control components which need to have an authenticated user. This context would be where logic controlling visibility based on roles would happen.