XYGo Admin 三级权限体系：RBAC 动态路由 + v-auth 按钮控制 + 字段级过滤全解析

引言

在 Vue3 后台管理框架的选型中，权限管理往往是决定架构基座质量的核心维度。RBAC 权限模型 如果做得粗放，要么是"一刀切"的菜单可见性控制，要么就靠前端硬编码 v-if 层层包裹------改一个角色配置得发版，维护成本极高。

XYGo Admin 在这块下了真功夫：角色权限 → 按钮级权限 → 字段级权限三级递进，而且后端配置前端生效，真正做到了"零代码"调整权限策略。下面逐一拆解。

一、角色权限（RBAC）------菜单与路由的骨架

XYGo Admin 预置了两种核心角色标识：

角色标识	说明
`R_SUPER`	超级管理员，拥有所有权限，不受权限校验限制
`R_ADMIN`	普通管理员，权限完全由分配的菜单决定

此外支持自定义角色，管理员可以创建任意角色并分配菜单树。权限分配流程非常直观：

创建角色 → 勾选菜单树
将角色分配给用户
用户登录后，后端返回该角色可访问的菜单列表
前端根据菜单列表动态注册路由

这意味着菜单的增减完全由后端驱动，前端不需要任何硬编码路由守卫------这是"动态路由"的正确打开方式。

二、按钮级权限------v-auth 指令的妙用

角色级别的菜单控制解决了"看什么"，按钮级权限解决"能做什么"。

在菜单管理中，可以为页面菜单添加按钮类型 的子节点，每个按钮绑定一个权限标识，如 add、edit、delete、export。

前端通过 v-auth 指令直接控制按钮显隐：

vue 复制代码

<template>
  <!-- 单个权限：只有拥有 add 权限的角色才能看到 -->
  <ElButton v-auth="'add'" type="primary">新增</ElButton>

  <!-- 多权限：满足其一即显示 -->
  <ElButton v-auth="['edit', 'update']" type="primary">编辑</ElButton>
</template>

v-auth 的工作原理很轻量：从当前路由的 meta.authList 读取权限列表，判断用户是否拥有指定权限，无权限就直接从 DOM 中移除该元素。不是在组件外套 v-if，而是指令级 DOM 移除，性能开销极小。

另外还提供了 v-roles 指令按角色控制，比如只让超级管理员看到的敏感区域：

vue 复制代码

<div v-roles="'R_SUPER'">超级管理员专属内容</div>

三、字段级权限------精细到数据维度

这是 RBAC 体系中容易被忽略但价值极高的一层。XYGo Admin 的字段权限控制实现了按角色、按模块配置每个字段的可见性和可编辑性。

后台「字段权限」管理中，可以为每个模块的字段分别设置：

可见：该角色可以看到此字段
可编辑：该角色可以修改此字段
隐藏：该角色完全看不到此字段

后端通过 admin_field_perm 表存储配置，在查询和更新时自动过滤字段 ------不是前端简单 v-show，而是后端直接把无权限的字段从响应中剥离。敏感数据保护这件事，靠前端藏字段是不可靠的，必须在后端做。

四、权限校验全链路

整体校验流程清晰高效：

markdown 复制代码

请求到达
  → AdminAuth 中间件
    → 解析 JWT Token
      → 获取用户角色
        → R_SUPER？直接放行
        → 检查请求路径是否在角色菜单权限中
          → 有权限：继续处理
          → 无权限：返回 403

R_SUPER 角色直接跳过所有校验------避免超级管理员被误拦的尴尬。普通角色才会走完整的菜单-接口匹配逻辑。

总结

一套好的权限系统，应该让配置人员"点几下"就能完成策略调整，而不是让前端同学反复改代码。XYGo Admin 的三级权限体系------从动态路由到 v-auth 指令再到后端字段过滤------在 Vue3 后台框架里属于成熟度很高的实践。对于需要在团队中落地细粒度权限控制的同学，值得仔细研究。

项目基于 GoFrame + Vue3 + Element Plus，MIT 协议开源，可直接商用。