Show/Hide menus based on User /* Flexible menu by menu */

Question

I have React App with sidebar menus, but I want to hide few of them based on User Role, but don't want common roles like 'ADMIN' , 'MODERATOR', etc. I want to make it flexible, so I can show/hide specific menus on different users
{like in the example below},
menus information will come from the database.

Menus: Employees, Orders, Trucks, Trailers, Bank Accounts, Contacts.

---

Administrator 1: Orders, Trucks, Trailers
Administrator 2: Employees, Bank Accounts, Contacts
Administrator Supervisor : Employees, Orders, Trucks, Trailers, Bank Accounts, Contacts

Can someone give me advice how should I proceed?

Answer 1

You can use private routes, with private routes you can put constraints on who can access those routes and when?, you can have simple checks in your html to show or hide those menus so that menus and routes are accessible based on your logic.

here is a very good documentation for you to checkout.

https://dev.to/nilanth/how-to-create-public-and-private-routes-using-react-router-72m

Answer 2

I think your question is already answered. you have to implement role based authorization. you can find your solution here. How to implement multi role based authorization in React

https://jasonwatmore.com/post/2019/02/01/react-role-based-authorization-tutorial-with-example