Какие есть архитектурные решения для лаконичной реализации ролей в React-приложениях?

Question

[evisotskiy]

Надо реализовать приложение, в котором на данный момент будет 2 роли - Free users, и Premium users (и в будущем, кол-во ролей может увеличиться). У ролей большая часть контента будет одинакова, но некоторые части будут отличаться. Например у фри-юзера будет синенькая кнопочка, а у премиум - красненькая. А если добавится роль Premium-Gold - у неё эта кнопочка может отображаться в другом месте на странице, и она тоже будет красненькая. Но, например, у Premium-Gold по нажатию на эту кнопочку будет ещё вызываться модальное окно, в котором его будут благодарить за нажатие этой кнопочки. И надо реализовать архитектуру таким образом, чтобы реализовать разное отображение контента, не замазывая код иф-елсами, и в то же время переиспользовать код. Есть какие-то известные/стандартные методики реализации данной фичи?

Comments

[developer007]

от if else никуда не деться.
нужен сервис который будет проверять .can(user_object, Roles.PREMIUM_GOLD)
это везде так. что react что ангуляр что vue и тд.

один фиг на беке всё проверяться должно.

Answer 1

[Олег Гамега]

еще не пробовоал, но можно посотреть как тут
https://auth0.com/blog/role-based-access-control-r...

Comments

[evisotskiy]

да, что-то в этом есть

Answer 2

[Сергей Сунцев]

Все просто, я сам такое недавно делал.
В роутах определяешь область видимости.

А в конечных компонентах из стора получаешь текущую роль.

Вот пример такого компонента

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)

Тут в this.props.access определяешь идентификаторы доступных ролей