1、菜单管理
ruoyi的菜单管理根据权限分成了目录,菜单,按钮三种粒度,目录和菜单的区别是,目录自身没有路由,由子菜单进行路由。
2、按钮权限
用户的按钮权限在getInfo接口里体现
3、菜单权限
用户的菜单权限在getRouters接口里体现
前端根据后端的接口信息对目录,菜单和按钮进行动态渲染,目录和菜单的渲染在002篇中已经讲过,下面是按钮的部分渲染逻辑:
// 单个<el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button> // 多个<el-button v-hasPermi="['system:user:add', 'system:user:edit']">包含权限字符串才能看到</el-button>
// 单个<el-button v-hasRole="['admin']">管理员才能看到</el-button> // 多个<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>
4、新建操作演示
接下来我们照着步骤新建一个目录,在目录下添加菜单,菜单下添加按钮进行实验。
第一步:新增目录
目标添加后需要刷新要更新路由,渲染出目录
第二步:新增菜单
新增菜单的元素比较多,我们看下现有的取点经,打开用户管理菜单,看看它是怎么设置的:
看了下,1个是组件路径,1个是权限字符需要注意,其它都比较明显,组件路径应该就是在vue工程目录下新建index.vue文件,而权限字符就是代表菜单的权限标志,我们照模照样写就可以
在指定目录下创建vue文件
第三步:新增按钮
最后看看效果图
目录,菜单,按钮都齐全了,今天这篇也就结束了。
5、总结
创建目录,其中有个路由地址是地址栏里的目录父路径,创建菜单中,组件路径是新建vue文件的地址,权限字符是配合前端动态渲染的字符,创建按钮同样有个权限字符也是动态渲染使用。
未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表