Umi、React下的前端权限控制最佳实践,颗粒程度组件级。

前言

想设计一种前端权限方案,灵活可控,解偶独立,颗粒程度可达到组件级。

方案设计

  • 抽象一种权限的概念,对于前端每个组件都可以抽象成,用户拥有的一种权限。一种权限对应唯一的key
  • 对于组件可抽象分为(1)基础组件(控制渲染不渲染)(2)多是视图的Tab层组件(控制那个子tab不显示)
  • 设计权限包裹组件,通过当前角色拥有的的权限Key,通过权限包裹组件,来判断组件是渲染还是禁用的其他状态。
  • 菜单权限的控制:umi 下的路由支持 ,access抽象权限,这里access我们可以抽象成,权限key,通过判断角色key,来自动过滤菜单
方案总览如下:

权限数据结构设计

权限key:

视图权限的数据结构嵌套

*成果

最终可达到用户权限编辑功能,可达到组件级,完全解藕,所有能看见的都能抽象成权限。通过扁平化的key 管理权限

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章