Springboot+vue前后端分离后台管理系统(⼗⼆)--动态⾓⾊菜单
前⾔
后台管理系统是基于RBAC设计的,也就是说不同的⾓⾊应该拥有不同的资源访问权限,这篇就来实现这个功能
实现
⽅式⼀
只提供了基础的vue后台管理框架,权限管理模块没有引⼊。
相对完整的组件demo和权限模块。它的动态路由配置如下:
前端配置完整的路由菜单
请求后端api返回 ⽤户拥有的菜单
在前端过滤渲染呈现⽤户的菜单
⽅式⼆
由后端统⼀配置菜单,直接返回给前端渲染
优缺点
⽅式⼀:对于前后端分离多⼈协作开发⽐较友好,前端只需要提供路由菜单的编码,由后端配置给对应⾓⾊⽤户。前端⼈员不受后端开发的约束。
⽅式⼆:动态路由菜单直接由后端配置并返回,相对安全。但是前端⼈员的路由⽂件的存放和命名就和后端⼈员耦合度较⾼。
这个demo尝试使⽤⽅式⼆的⽅式来实现动态路由菜单,喜欢⽅式⼀的可以直接研究vue-element-admin项⽬系统管理功能
⽤户界⾯
⽤户管理:新增/编辑⽤户信息,并可以给⽤户设置⼀个或多个⾓⾊。
⾓⾊界⾯
⾓⾊管理:新增/编辑⾓⾊信息,并可以给⾓⾊设置菜单权限。
菜单界⾯
菜单管理:新增/编辑、管理所有的基础菜单,不同⾓⾊可以指定不同的菜单。核⼼代码
数据库菜单数据
接⼝返回给前端的树形结构数据
"menus":[{
"id":"5e9d2ef576424b61445388acc285da0f", "pId":"0",
"weight":"10",
"name":"系统管理",
"path":"/sys-manage", "component":"",
"code":"sys-manage", "hidden":"0",
"createTime":null,
"forbidden":null,
"icon":"el-icon-s-operation", "permission":"",
"updateTime":null,
"type":"0",
"children":[{
"id":"e308c7f841d56b791af44fd6a0b6745f", "pId":"5e9d2ef576424b61445388acc285da0f", "weight":"10",
springboot结构"name":"⽤户管理",
"path":"/users",
"component":"sys/user/users", "code":"users",
"hidden":"0",
"createTime":null,
"forbidden":null,
"icon":"el-icon-user-solid", "permission":"",
"updateTime":null,
"type":"0"
},{
"id":"72633ded69127f0974141bb5687e541d", "pId":"5e9d2ef576424b61445388acc285da0f", "weight":"20",
"name":"⾓⾊管理",
"path":"/roles",
"component":"sys/role/roles", "code":"roles",
"hidden":"0",
"createTime":null,
"forbidden":null,
"icon":"el-icon-s-custom", "permission":"",
"updateTime":null,
"type":"0"
},{
"id":"5aadb65fed8eca1761bcabe8bb6b9cf9", "pId":"5e9d2ef576424b61445388acc285da0f", "weight":"30",
"name":"菜单管理",
"path":"/menus",
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论