@evisotskiy

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

Надо реализовать приложение, в котором на данный момент будет 2 роли - Free users, и Premium users (и в будущем, кол-во ролей может увеличиться). У ролей большая часть контента будет одинакова, но некоторые части будут отличаться. Например у фри-юзера будет синенькая кнопочка, а у премиум - красненькая. А если добавится роль Premium-Gold - у неё эта кнопочка может отображаться в другом месте на странице, и она тоже будет красненькая. Но, например, у Premium-Gold по нажатию на эту кнопочку будет ещё вызываться модальное окно, в котором его будут благодарить за нажатие этой кнопочки. И надо реализовать архитектуру таким образом, чтобы реализовать разное отображение контента, не замазывая код иф-елсами, и в то же время переиспользовать код. Есть какие-то известные/стандартные методики реализации данной фичи?
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 2
gadfi
@gadfi
https://gamega.org
еще не пробовоал, но можно посотреть как тут
https://auth0.com/blog/role-based-access-control-r...
Ответ написан
GreyCrew
@GreyCrew
https://moikrug.ru/greyewi
Все просто, я сам такое недавно делал.
В роутах определяешь область видимости.

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

Вот пример такого компонента
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 определяешь идентификаторы доступных ролей
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы