如何根据 React 中的角色授权用户

Question

我正在开发 React 应用程序，目前我有不同的角色，例如（管理员、经理、代理）等。如果用户没有获得该组件/页面的授权，我想保护每条路由。如果用户未授权，那么我想重定向主页。我想在登录后完成。我是一个初学者，我想解决我的问题，任何例子都将不胜感激。

谢谢

Answer 1

您会发现不同的方法，但我使用 HOC。我小时候传递了我想要授权的功能。 HOC 有我手动传递的道具来指定允许哪些角色，许可证 ID ecc... 所以 HOC 实现了身份验证逻辑，如果用户被授权，它会呈现子级，而不是呈现一些错误页面。

Answer 2

您正在寻找的是 RBAC，即基于角色的访问控制。我建立了一个库，可以完成您正在寻找的大部分内容。您可以在此处查看源代码，了解如何将其实施到您自己的项目中。 https://github.com/schester44/react-access-control

示例：

index.js

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

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

App.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>
}

Child.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>
}