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低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。