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

反应应用程序和用户角色

1 个答案: