如何在React应用程序中处理权限检查(Redux中的状态维护)
How to handle permission check in React app (State maintain in Redux)?
React中如何处理权限检查?我试了两种方法。有什么更好的方法来处理权限检查,或者哪种方法最适合使用?
类型1
通过上下文传递权限。如果权限满足返回组件或空,则权限组件从上下文获取权限
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;
}
}
类型2
检查mapStateToProps函数中的权限,并根据权限返回道具
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)
任何一种解决方案都可以。请注意,第二个解决方案提供了不同级别的访问,而第一个解决方案是"要么全有要么全无"。因此,这取决于您的需求和编码风格偏好。
相关文章:
- 设计redux状态树
- 更新Redux状态&然后在同一实例中获取更新状态
- 在 Redux 状态下存储具有原型函数的对象
- 检查 redux 状态是否更改的简单方法
- React/Redux 状态在第二次操作调用时为空
- 如何同步Redux状态和url哈希标记参数
- 使用类进行 Redux 状态管理
- 当 redux 状态更新时,在组件上调用 forceUpdate()
- 如何使用重新选择访问当前的 Redux 状态
- 如何根据 Electron 菜单单击更改 Redux 状态
- 如何将 redux 状态返回到初始状态
- 如何更改输入字段值,使其不会在每次更改时贯穿整个 Redux 状态更新周期
- 将当前活动选项卡保存为 redux 状态
- 用于更新Redux状态的多个部分的模式
- 在离开页面后重置我的应用程序的redux状态
- 监听相同redux状态的组件级别
- 在redux状态改变后处理不纯的DOM操作
- 如何将方法放在Redux状态的对象上
- Redux状态没有更新,尽管所有数据都正确传递
- 如何在树中更新redux状态