# 菜单规则(路由与权限)
BuildAdmin
实现了非常强大的路由与权限模块。
- 路由与权限可在后台可视化增删改查
- WEB端路由自动注册
- WEB端按钮级鉴权
- 无限子级菜单(权限节点)
- 前后两端双鉴权
- 更多待您自行探索
# 菜单规则管理
我们在后台内置了菜单规则管理
功能,因为此功能设计略显复杂,此处对该功能进行介绍。
# 菜单推荐设计规则
规则标题 | 规则类型 | 规则名称 | 路由路径 | 设计建议 |
---|---|---|---|---|
权限管理 | 目录 | auth | auth | 名称和路由路径直接使用目录名即可 |
示例 | 目录 | authLog | authLog | 多单词时,名称和路由路径直接使用小写驼峰 命名即可 |
添加 | 按钮 | auth/group/index | 按钮无需路由路径,名称则直接按父级/按钮名称 设计 | |
控制台 | 一级菜单 | dashboard/dashboard | dashboard | 名称使用文件名/文件名 ,路由路径直接使用文件名 |
权限管理 | 二级菜单 | auth/group | auth/group | 名称使用目录/文件名 ,路由路径同名称 |
管理日志 | 二级菜单 | auth/adminLog | auth/adminLog | 文件名小写驼峰 ,名称和路由路径目录/文件名 |
# 特殊字段详细解释
- 规则名称:规则的名称应该是英文的,同时将自动注册为
Vue Router
的路由name
,以方便开发者随时导航,我们推荐直接使用/
来分隔目录层次,并使用小写驼峰语法来分隔多个单词。 - 路由路径:比如您正在看的网页的路径是:
/senior/addMenuRule
,您需要为当前规则设计一个路由路径,您可以使用以上表格中我们推荐的规则进行设计。 - 菜单类型:选项卡背后通常有对应的
vue
和控制器
代码文件,而链接
和Iframe
则通常至外站的链接。 - 组件路径:填写实际的
index.vue
组件路径即可,例如:/src/views/backend/auth/group/index.vue
。 - 扩展属性:可以配置只自动注册到路由或菜单,这样就可以实现:同一路由下多个菜单,比如将
auth/menu
只添加为路由,那么可以另外将auth/menu
、auth/menu/:a
、auth/menu/:b/:c
只添加为菜单 - 规则权重:数字越大,排序越靠前,系统内置的
控制台
的权重为999
- 缓存:开启后,将使用
keep-alive
包裹标签页,实现切换标签,原标签保留状态(表单输入等) - 上级菜单规则:本规则的
上一级
规则,上级规则不能是按钮,在表格中,上下级关系将以树
状结构展示。
# 实现方式
- 在管理员访问后台时,系统首先请求了:
/index.php/admin/index/index
接口,获取了后台的菜单规则,这些规则,是在后台的:权限管理->菜单规则管理添加的。 - 在该接口内,通过
\ba\Auth
类,我们只获取了管理员拥有的菜单规则(权限节点)。 - WEB端的对该接口的请求是从
/src/layouts/backend/index.vue
文件发出的。 - 在请求结束后,我们立即将菜单规则解析为
Vue-Router 路由规则
并自动进行注册,同时设定好后台的左侧菜单规则,并记录下管理员各个页面的页面按钮
权限。 - 此时,路由已注册,菜单已正常渲染,而当我们使用按钮鉴权 (opens new window)或按钮鉴权-函数式 (opens new window)时,系统会获取当前用户打开的路由,拼接为
当前路由/要验证的权限名称
,将拼接结果与管理员页面按钮权限
进行比对,若未找到,则隐藏按钮。
例如,管理员当前打开的路由为:/#/admin/auth/group
,此时使用按钮鉴权:
auth('index') // 拼接为 auth/group/index 然后在`管理员页面按钮权限`寻找是否有此权限
auth('edit') // 拼接为 auth/group/edit 然后在`管理员页面按钮权限`寻找是否有此权限
例如,管理员当前打开的路由为:/#/admin/auth/menu
,此时使用按钮鉴权:
<!-- // 拼接为 auth/menu/add 然后在`管理员页面按钮权限`寻找是否有此权限 -->
<el-button v-auth="'add'">添加</el-button>
<!-- // 拼接为 auth/menu/del -->
<el-button v-auth="'del'">删除</el-button>