Реагировать на приложения и роли пользователей

Question

Существует ли «встроенный» способ охвата различными пользовательскими ролями в React Application?Я хочу, чтобы определенные вкладки, меню и ссылки (маршруты) были доступны только для определенных пользователей, а не для других.Кроме того, содержание и параметры многих представлений будут различаться в зависимости от роли.Я знаю, как управлять ролями в серверной части и получать их во время аутентификации в маркере JWT, но как лучше всего параметризовать состояние и представление на стороне клиента на основе ролей?Являются ли условия Redux и логикой рендеринга подходящими или есть более рациональное решение, которое не требует от браузера клиента знать все возможные состояния для разных ролей до аутентификации?

Answer 1

Я могу предложить написать компонент более высокого порядка, который принимает роли, которые могут видеть функцию.

const AuthorizeOnly = ({ children, allowedRoles, user }) => (
  allowedRoles.includes(user.role)
  && (
  <React.Fragment>
    {children}
  </React.Fragment>
  )
);

// некоторый компонент

loggedInUser = {
  name:'john',
  role:'admin' 
}
render(){
   <div>
     <AuthorizedOnly allowedRoles={['admin']} user={loggedInUser}>
       <p>only admin can see this.</p>
      </AuthorizedOnly>
   </div>
 }

Вы можете настроить логику внутри компонента AuthorizedOnly на основе вашей бизнес-логики.

Для маршрутизатора вы можете использоватьаналогичный компонент, который возвращает Route в зависимости от вашего состояния