反应应用程序和用户角色

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