Best way to implement Permission for each element in React component

Question

I have to implement resource based access control in React application. My requirement as below.

I have defined authorization control in database like below for each page elements like buttons, input fields, labels. and these authorization controls will get assigned to users during user registration.

1. PageName.userId.FieldName = 'Allow'

2. PageName.DeleteButton ='Not-Allow'

3. PageName.AddButton ='Allow'

4. PageName.DeleteButton ='Allow'

When user logged-in, then application must bring all user mapped authorization and check against the visiting page elements and then allow user to view those elements.

Example: User Listing page, there will be edit user, delete User and update user button. In this page, few user will have access to delete button and few users will not have access to delete button. Like this, I must apply authorization logic to input fields like user Id input field should not be visible to certain users during edit user action.

My Implementation would be on each page render, I have to check what are page resource (Fields and buttons) exist in that page and then have to check whether the user having authorization to these resources or not.

What would be best way to implement these type of authorization ? As I have more than 300 pages in my application and each page I have to check these authorization and allow to user or not allow to user to do certain actions. Each page will have more than 10 elements (input fields and buttons.).

Answer 1

According to the comments, what you need is a react technique called: Higher Order Components in which an entire class is loaded before another component. Is in this class that you can write some lines to access to the json authorization object and enable or disable/hide some elements in your forms.

Flow could be:

• After login form, you will exchange user/password with your rest api by a response like this:

{
  "token": "eyJhbGciOiJI",
  "forms": [
    "form1": {
      "allowedElements": {"DeleteButton","AddButton"}
    },
    "form2": {
      "allowedElements": {"CancelButton"}
    }
  ]
}

• If response is success, store it and call to another route like home or something that your logged in user should see.
• This route uses HOC so before its renderization, another class is loaded.

<Route exact path='/home' component={ConfigureFormElements(Home)} />

import React from 'react'

export default function(ComposedComponent) {

  class ConfigureFormElements extends Component {

    state = ...

    componentWillMount() {
    
    }

    componentWillUpdate(nextProps) {
      
    }

    render() {
      return <ComposedComponent {...this.props}/>
    }

  }

  return ConfigureFormElements

}

• Choose the appropriate method to access to the object which contains the authorization data to enable and disable form elements.

render: function() {
    return (
      <button className={this.props.shouldHide ? 'hidden' : ''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </button>
    );
}

So if you have 300 pages, I assume that you have something like this:

<Route exact path='/page1' component={Page1} />
...
<Route exact path='/page150' component={Page150} />
...
<Route exact path='/page300' component={Page300} />

If you use HOC, you just need to add the ConfigureFormElements

<Route exact path='/page1' component={ConfigureFormElements(Page1)} />
...
<Route exact path='/page150' component={ConfigureFormElements(Page150)} />
...
<Route exact path='/page300' component={ConfigureFormElements(Page300)} />

Recommended lectures

• https://reactjs.org/docs/higher-order-components.html
• https://www.tutorialspoint.com/reactjs/reactjs_higher_order_components.htm
• https://stackoverflow.com/a/45905649/3957754
• https://blog.jakoblind.no/simple-explanation-of-higher-order-components-hoc/
• https://ed.team/blog/higher-order-components-en-react
• Show or hide element in React

Answer 2

All I can think of is to add display='none' or some css styling to disable the button/input on the front-end side. So you would have to somehow map the buttons either with inline style or with a component with props. I would recommend something like <Button auth={"some_auth_type_here"} buttonType={"some_button_type_here"}/>.

Additionally, I highly recommend server-side rejection for the authorization as well, since user could have direct access to api. Usually apis can be called from the url directly (i.e., google.com/api/session/killAllUser) which can lead to unexpected outcomes.