Javascript 如何在React应用程序中处理权限检查（在Redux中维护状态）？

如何在React中处理权限检查？ 我试了两种方法。有没有更好的方法来处理权限检查，或者哪种方法最适合使用

类型1
通过上下文传递权限。如果权限满足返回组件或为null，则权限组件从上下文获取权限

class HomePage extends React.Component{
  getChildContext(){
   return {permission:this.props.permission}
  }
   render(){
     return <div>
       <Permission check='Edit'>
         <PopupMenu> 
           <div>Edit</div>
         </PopupMenu>
       </Permission>
       <Permission check='Delete'>
         <PopupMenu> 
            <div>Delete</div>
         </PopupMenu>
       </Permission>
   </div>
  }
}
HomePage.childContextType={permission:...}
class Permission extends React.Component{
    render(){
       if(this.context.permissions.indexOf(this.props.check)!=-1)
         return this.props.children
       else
         return null;
    }
}

类主页扩展React.Component{
getChildContext（）{
返回{permission:this.props.permission}
}
render（）{
返回
编辑
删除
}
}
HomePage.childContextType={权限：…}
类权限扩展了React.Component{
render（）{
if（this.context.permissions.indexOf（this.props.check）！=-1）
归还这个。道具。孩子们
其他的
返回null；
}
}

类型2
在MapStateTops函数中检查权限，并根据权限返回道具

class HomePage extends React.Component{
    render(){
    return <div>
       <PopupMenu> 
          <div>{this.props.operation}</div>
       </PopupMenu>
    </div>
    }
  }
function mapStateToProps(state){
   var operation="";
   if(state.permission=="Edit"){
      operation="Edit"
   }
   else if(state.permission=="Delete"){
      operation="Delete"
   }
   return {operation}
}
connect(mapStateToProps)(HomePage)

类主页扩展React.Component{
render（）{
返回
{this.props.operation}
}
}
函数MapStateTops（状态）{
var运算=”；
如果（state.permission==“编辑”）{
operation=“编辑”
}
else if（state.permission==“Delete”）{
操作=“删除”
}
返回{operation}
}
连接（mapStateToProps）（主页）

两种解决方案都可以。注意：第二个解决方案提供了不同级别的访问，而第一个解决方案是“全部或无”。因此，这取决于您的需求和编码风格偏好。

谢谢。还有别的办法吗？例子