What are the architectural solutions for the concise implementation of roles in React applications?

Question

Software design

It is necessary to implement an application in which at the moment there will be 2 roles - Free users, and Premium users (and in the future, the number of roles may increase). Roles will have most of the content the same, but some parts will be different. For example, a free user will have a blue button, while a premium user will have a red one. And if the Premium-Gold role is added, this button can be displayed in a different place on the page, and it will also be red. But, for example, for Premium-Gold, by clicking on this button, a modal window will also be called, in which they will thank him for pressing this button. And it is necessary to implement the architecture in such a way as to implement a different display of content without smearing the code with if-els, and at the same time reuse the code. Are there any known/standard methods for implementing this feature?

Answer 1

Haven't tried it yet, but you can see how here
https://auth0.com/blog/role-based-access-control-r...

Answer 2

It's simple, I just did it myself.
In routes you define scope.
And in the final components from the store you get the current role.
Here is an example of such a component

class ProtectedRoute extends Component {
  
  render() {
    const {component, ...rest} = this.props
    return <Route {...rest} render = {this.getComponent}/>
  }
  
  getComponent = (...args) => {
    return this.props.user && this.props.access.indexOf(this.props.user.role) !== -1 ? <Main title={this.props.title} ><this.props.component {...args} /></Main> :
      <ErrorPage/>
  }
}

export default connect(state => ({
  user: userSelector(state)
}), null, null, { pure: false })(ProtectedRoute)

Here in this.props.access you define the identifiers of available roles