RBAC in React, how to implement, conception?

I need to implement RBAC in React app. I've read the article - - 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?

2 Answers

Front-end authorization is not enough. You also need back-end authorization to avoid attackers bypassing your front-end. A good practice is that you use exactly the same technique for front-end auth and back-end auth. I recommend using Casbin, as it supports front-end JS and backend languages like Go, Java, Node.js, Python. So you don't need to use different permission mechanisms for front-end and back-end.

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.

1. Buttons and Actions
2. Pages and Redirections
3. Modules and Route Guards.

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