BuildAdmin

Appearance

菜单规则（路由与权限） ​

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/menu、auth/menu/:a、auth/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>