【ruoyi前后端分离版学习】003--菜单管理

ruoyi的菜单管理根据权限分成了目录，菜单，按钮三种粒度，目录和菜单的区别是，目录自身没有路由，由子菜单进行路由。

用户的按钮权限在getInfo接口里体现

用户的菜单权限在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>

接下来我们照着步骤新建一个目录，在目录下添加菜单，菜单下添加按钮进行实验。
第一步：新增目录

目标添加后需要刷新要更新路由，渲染出目录
第二步：新增菜单
新增菜单的元素比较多，我们看下现有的取点经，打开用户管理菜单，看看它是怎么设置的：

看了下，1个是组件路径，1个是权限字符需要注意，其它都比较明显，组件路径应该就是在vue工程目录下新建index.vue文件，而权限字符就是代表菜单的权限标志，我们照模照样写就可以

在指定目录下创建vue文件

第三步：新增按钮

最后看看效果图

目录，菜单，按钮都齐全了，今天这篇也就结束了。
我们最后总结下：
创建目录，其中有个路由地址是地址栏里的目录父路径，创建菜单中，组件路径是新建vue文件的地址，权限字符是配合前端动态渲染的字符，创建按钮同样有个权限字符也是动态渲染使用。
今天我们把菜单管理简单捋了一遍，下一篇我们来看角色管理，角色管理和菜单管理关系密切，不通角色有不同的菜单访问权限，因此我们就接下来讲。