Как авторизовать пользователя на основе роли в React

Question

Я работаю над приложением React, в настоящее время у меня разные роли, например (администратор, менеджер, агент) и т. Д. c. Я хочу защитить каждый маршрут, если пользователь не авторизован для этого компонента / страницы. Если пользователь не авторизуется, я хочу перенаправить домашнюю страницу. Я хочу сделать после входа в систему. Я новичок, и я хочу решить свою проблему, любой пример будет оценен.

Спасибо

Answer 1

Вы найдете разные методы, но я использую HO C. В детстве я передаю функциональность, для которой хочу авторизоваться. HO C имеет реквизиты, которые я передаю вручную, чтобы указать, какие роли разрешены, идентификатор лицензии e cc ... Таким образом, HO C реализует auth logi c и отображает дочерние элементы, если пользователь авторизован. вместо этого он отображает некоторые страницы ошибок.

Answer 2

То, что вы ищете, это RBA C или управление доступом на основе ролей. Я построил библиотеку, которая делает большую часть того, что вы ищете. Вы можете просмотреть источник здесь для идей о том, как внедрить его в свой собственный проект. https://github.com/schester44/react-access-control

Примеры:

index. js

import { AccessProvider } from 'react-access-control;

return (<AccessProvder>
  <App />
</AccessProvder>)

Приложение. js

import { useAccess } from 'react-access-control'
import Child from './Child.js'

function App() {
  const { define } = useAccess()

  React.useEffect(() => {
    define({
      permissions: {
        "Admin": false,
        "Moderator": true
      }
    })
  }, [])

  return <div>
    <Child />
  </div>
}

дочерний. js

import { hasPermission } from 'react-access-control'

function Child() {
  const isAdmin = hasPermission('Admin')
  const isModerator = hasPermission('Moderator')

  return <div>
    {isAdmin && <AdminButton />}
    {isModerator && <ModeratorButton />}
  </div>

}

Вы также можете использовать компонент <Show/> для отображения / скрытия компонентов на основе разрешений.

import { Show } from 'react-access-control'


function Child() {
  return <div>
    <Show when="Admin">
      <AdminButton />
    </Show>
  </div>
}