BuildAdmin

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

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

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

# 菜单规则管理

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

TIP

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

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

  • 规则名称：规则的名称应该是英文的，同时将自动注册为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. 此时，路由已注册，菜单已正常渲染，而当我们使用前端鉴权-函数式 (opens new window)或前端鉴权 (opens new window)时，系统会获取当前用户打开的路由，拼接为当前路由/要验证的权限名称，将拼接结果与管理员页面按钮权限进行比对，若未找到，则隐藏按钮。

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

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


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

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

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

← 代码编辑器配置 →