I need to implement RBAC in React app. I've read the article - https://auth0.com/blog/role-based-access-control-rbac-and-react-apps/ - and understood how its done, but one thing I didn't understand is how to automate gathering information about all protected actions to edit roles (add those permission and delete)?
I've got the point: there is some protected action I wrapped it in some HOC and check if user can see it or not. Now let's look at this from another point of view. I need to have ability to configure roles. I open editor, create name for role and want to add some permissions to user. I should choose them from somewhere, thus the list (log, table - as you wish) of all actions I want to implement RBAC to becomes my center of Universe. So that each time I need a protected button (route) I should add its ID to some list. That's complex, unnecessary action. What mechanism can I use to avoid using of list of action described above?
My thoughts are: For protected components I put to their name some postfix -sec (Component-sec.js). Inside of them I create properties with its name and description. Then in admin page I show all of permissions which are components with postfixes (by analyzing their names, HOW? I've never used reflection in JS), and show their names and descriptions (name and description properties). This is about automation in configuring. If to speak about allowing and denying job, here I can use some HOC (AuthComponent) where I can check permission.
class MyComponent extends AuthComponent {}
class AuthComponent extends React.component {}
What do you think about it? Maybe there are some better ways to gather and handle permissions?
I am not sure whether it will help you directly or not.
But I have implemented the RBAC in my custom way. I have controlled the following things.
I have written a blog with a complete working example.
You can have a look. Please let me know if you still need more info or anything ambiguous.
RealMelon Tutorial - How to create RBAC (Role based Access Control)in ReactJS