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

Question

How to handle permission check in React? I tried in two ways. Any better way to handle permission check or which one is most good to use?

Type 1
Pass permissions via context. Permission component gets permissions from context if permission satisfy return component or 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;
    }
}

Type 2
Check the permission in the mapStateToProps function and return props based on permission

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)

Answer 1

either solution is fine. Note the 2nd solution offers various levels of access, while the first solution is "all or nothing". So it just depends upon your needs and coding style preferences.