Skip to content

菜单规则(路由与权限)

BuildAdmin 实现了非常强大的路由与权限模块。

  • 路由与权限可在后台可视化增删改查
  • WEB端路由自动注册
  • WEB端按钮级鉴权
  • 无限子级菜单
  • 前后两端双鉴权
  • 更多待您自行探索

菜单规则管理

我们在后台内置了 菜单规则管理 功能,分为后台的 权限管理->菜单规则管理 和前台的 会员管理->菜单规则管理

TIP

  1. 用户仅能看到有权限访问的菜单
  2. 用户仅能看到有权限操作的按钮,比如 添加、编辑、删除 按钮都是按权限进行显示的
  3. 为管理员分配权限的位置为:权限管理->角色组管理,为会员分配权限的位置为:会员管理->会员分组管理
  4. 前端验权后进行展示的情况,请使用 前端鉴权-函数式前端鉴权

菜单规则管理中的特殊字段

  • 规则名称:规则的名称应该是英文的,同时将自动注册为 Vue Router 的路由 name,以方便开发者随时导航,我们推荐直接使用 / 来分隔目录层次,并使用小写开头的驼峰语法来分隔多个单词。
  • 路由路径:比如您正在看的网页的路径是:/senior/addMenuRule,您需要为当前规则设计一个路由路径,建议直接和 规则名称 保持一致即可。
  • 菜单类型:选项卡背后通常有对应的 vue控制器 代码文件,而 链接Iframe 则通常至外站的链接。
  • 组件路径:填写实际的组件路径即可,例如:/src/views/backend/auth/group/index.vue
  • 规则权重:数字越大,排序越靠前,系统内置的 控制台 的权重为 999
  • 扩展属性:可以配置只自动注册到路由或菜单,这样就可以实现:同一路由下多个菜单,比如将 auth/menu 只添加为路由,那么可以另外将 auth/menuauth/menu/:aauth/menu/:b/:c 只添加为菜单
  • 缓存:开启后,将使用 keep-alive 包裹标签页,实现切换标签,原标签保留状态(表单输入等)
  • 上级菜单规则:本规则的 上一级 规则,上级规则不能是按钮,在表格中,上下级关系将以 树状结构 展示。

实现方式

  1. 在管理员访问后台时,系统首先请求了:/index.php/admin/index/index 接口,获取了后台的菜单规则,这些规则,是在后台的:权限管理->菜单规则管理添加的。
  2. 在该接口内,通过 \ba\Auth 类,我们只获取了管理员拥有的菜单规则(权限节点)。
  3. WEB端的对该接口的请求是从 /src/layouts/backend/index.vue 文件发出的。
  4. 在请求结束后,我们立即将菜单规则解析为 Vue-Router 路由规则 并自动进行注册,同时设定好后台的左侧菜单规则,并记录下管理员各个页面的 页面按钮 权限。
  5. 此时,路由已注册,菜单已正常渲染,而当我们使用 前端鉴权-函数式前端鉴权 时,系统会获取当前用户打开的路由,拼接为 当前路由/要验证的权限名称,将拼接结果与 管理员页面按钮权限 进行比对,若未找到,则隐藏按钮。

例如,管理员当前打开的路由为:/#/admin/auth/group,此时使用按钮鉴权:

ts
auth('index') // 拼接为 auth/group/index 然后在`管理员页面按钮权限`寻找是否有此权限
auth('edit') // 拼接为 auth/group/edit 然后在`管理员页面按钮权限`寻找是否有此权限

// 还可以使用菜单规则的 name 进行鉴权
// 详细使用方法请转至:https://doc.buildadmin.com/senior/web/utils.html
auth({ name: '/admin/user/group', subNodeName: '/admin/user/group/add' })

例如,管理员当前打开的路由为:/#/admin/auth/menu,此时使用按钮鉴权:

vue
<!-- // 拼接为 auth/menu/add 然后在`管理员页面按钮权限`寻找是否有此权限 -->
<el-button v-auth="'add'">添加</el-button>
<!-- // 拼接为 auth/menu/del -->
<el-button v-auth="'del'">删除</el-button>