菜单权限功能设计

一. 方案1

菜单数据

菜单数据如果非常简单,固定不变,我们可以直接用json文件来维护。每个菜单有个id标识唯一性,菜单有父子关系,最多三级。有些菜单还支持配置按钮权限。

{
  "menu": [
    {
      "parent_id": "",
      "id": "data_analysis",
      "name": "数据分析",
      "button_list": null,
      "children": [
        {
          "parent_id": "data_analysis",
          "id": "data_analysis_1",
          "name": "商家信息",
          "button_list": [
            {
              "button_name": "搜索",
              "button_id": "data_analysis_1_search"
            }
          ],
          "children": []
        }
      ]
    }
  ]
}

路由权限数据

菜单和其相关的按钮都可以绑定多个路由,一个角色配置了菜单和按钮的权限,则其就具备对应的路由权限。路由权限数据也可用json来维护,内容就是简单的kv,key是菜单id或者按钮id,value是一个数组存一批路由。

{
  "data_analysis_1": [
    "/admin/data/list"
  ],
  "data_analysis_1_search": [
    "/admin/data/detail"
  ]
}

角色表和角色权限表

按照角色分配菜单权限,所以分配的对象是菜单。我们需要维护一个角色表。比如 admin_role, 核心字段就是角色的唯一标识,比如 role_id。

给用户分配的菜单,需要一个角色菜单表记录它们的关联。有些菜单中还有按钮等操作单元,我们统一可以记录角色和这些按钮操作的关系。所以创建个表,比如 admin_role_access。 

表中字段

  • menu_id_data: 
    • 存一个角色有哪些菜单配置,用json维护一个数组,元素就是每个菜单的id。
    • 比如如果没用权限,那么 menu_id_data的值为 {"menu_data": []}
    • 如果给某个角色勾选了一个菜单权限,这个菜单id就会存起来,比如{"menu_data": ["data_analysis", "data_analysis_1"]}
  • button_id_data:
    • 存一个角色有哪些菜单的button权限,也是用json维护的数组,元素就是每个button的id。
    • 比如如果没用权限,那么 button_id_data的值为{"button_data": []}
    • 如果给某个角色勾选了某个菜单下的按钮权限,这个按钮id就会存起来,比如{"button_data": ["data_analysis_1_search"]}

  • 8
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue菜单权限设计和实现主要包括以下几个方面: 1. 菜单数据结构设计:首先,我们需要设计一个合适的菜单数据结构,一般可以使用树形结构来表示菜单的层级关系。每个菜单项包括菜单名称、路由路径、图标、是否显示等属性。 2. 权限控制设计:在用户登录成功后,后端会返回该用户所拥有的菜单权限列表。前端可以通过保存用户的菜单权限,对用户进行菜单权限的控制。一种常用的做法是在路由守卫中判断用户是否有访问该路由的权限,并根据权限来动态渲染菜单。 3. 菜单渲染和动态展示:根据用户的菜单权限列表,前端通过递归遍历菜单数据结构,来渲染用户可见的菜单项。通过在菜单组件中动态绑定数据,可以实现菜单的展开和收起、高亮当前路由等功能。 4. 菜单操作和权限判断:除了菜单的展示,还需要考虑菜单的操作权限判断。例如,某个菜单项只有管理员才有权限访问,可以根据用户的角色或权限列表来判断该菜单项是否应该显示或可操作。 5. 菜单数据的动态更新:在某些场景下,菜单的数据可能会有动态更新。比如,管理员新增了一个菜单项,对应的路由也发生了变化。这时候,前端需要通过调用后端接口来更新用户的菜单权限列表,并且重新渲染菜单。 综上所述,Vue菜单权限设计和实现需要从菜单数据结构设计、权限控制、菜单渲染和动态展示、菜单操作和权限判断、菜单数据的动态更新等方面进行考虑和实现。通过合理的设计和实现,可以确保系统具备良好的菜单权限管理功能,提高用户体验和系统安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值