React 应用程序和用户角色

【问题标题】：React Application and User RolesReact 应用程序和用户角色
【发布时间】：2019-03-16 17:55:00
【问题描述】：

在 React 应用程序中是否有一种“内置”方式来定义不同用户角色的范围？我希望某些选项卡、菜单和链接（路线）仅对某些用户可用，而对其他人不可用。此外，许多视图的内容和选项会因角色而异。我知道如何在后端管理角色并在 JWT 令牌中的身份验证期间检索它们，但是基于角色参数化客户端状态和表示的最佳方法是什么？ Redux 和渲染逻辑条件是否可行，或者是否有更简化的解决方案，它不一定要求客户端浏览器在身份验证之前了解不同角色的所有可能状态？

【问题讨论】：

标签： javascript reactjs authentication authorization single-page-application

【解决方案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

【讨论】：