在若依（Ruoyi-Vue）前后端分离框架的开发中，权限管理是核心模块之一。很多初学者在刚接触时，往往搞不清前端按钮隐藏与后端接口拦截之间的关系。

今天，我将通过一个完整的实战案例——“为学生添加奖惩记录”，带大家从零开始编写自定义后端接口、配置前端按钮，并打通整个 RBAC（基于角色的访问控制）权限链路。文末还附带了我亲自踩过的坑及解决方案，希望能帮大家少走弯路！

一、 后端：编写自定义接口并设置权限校验

在若依中，后端接口的安全由 Spring Security 框架把控。我们需要在 Controller 层写好业务逻辑，并给它挂上专属的“权限暗号”。

1. 打开后端的 Controller 文件（如本例中MyStudentController）。

2. 编写接口逻辑，并使用 @PreAuthorize 注解定义权限标识。在本例中，我们定义的标识为 system:student:honor:add。

后端接口代码：

/**
     * 自定义接口：添加学生奖惩记录
     */
    @PreAuthorize("@ss.hasPermi('system:student:honor:add')")
    @PostMapping("/honor/add")
    public AjaxResult addHonor(String studentName, String honorName) {
        // 模拟保存业务逻辑
        return AjaxResult.success("成功为学生 [" + studentName + "] 添加荣誉：" + honorName);
    }

(图片说明：展示后端代码 @PreAuthorize 的定义及接口方法)

二、 系统配置：在菜单管理中注册权限标识

后端设好了关卡，前端必须向系统注册这把“钥匙”。

1. 登录管理员账号，进入 系统管理 -> 菜单管理，点击新增。

2. 菜单类型选择“按钮”。

3. 最关键的一步：在【权限字符】一栏中，必须填入与后端 @PreAuthorize 注解中完全一致的字符串！

(图片说明：添加菜单的弹窗)

配置完成后，我们可以在菜单列表中检查一下，确保这里显示的权限标识和后端代码严格对应，连一个字母、一个冒号都不能差。

(图片说明：菜单列表)

三、 权限下发：角色分配与用户授权

有了权限菜单，接下来要把这个权限打包成“角色”，发给具体的测试用户。

1. 进入 系统管理 -> 角色管理，确认我们用于测试的角色（例如“学工管理员”或“普通角色”）已存在。

(图片说明：角色管理列表页面)

2. 进入 系统管理 -> 用户管理，找到我们需要测试的账号（例如 ry），点击修改，在弹窗中将刚刚的角色分配给该用户。

(图片说明：修改用户弹窗，勾选对应的角色)

四、 前端开发：对接接口与按钮显隐控制

前后端权限已经配好，现在我们需要在 Vue 页面中画出这个按钮，并让它调用接口。

1. 添加按钮并绑定权限指令：

在对应的 .vue 文件（如 user/index.vue 或 student/index.vue）的 <template> 中，使用 v-hasPermi 指令控制按钮显示。只有拥有该权限的用户，才能在页面上看到这个按钮。

前端 Template 代码：

       <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-medal"
          size="mini"
          @click="handleHonorAdd"
          v-hasPermi="['system:student:honor:add']"
         >菜单权限测试
        </el-button>
      </el-col>

(图片说明：添加测试按钮)

2. 编写请求方法：在 <script> 的 methods 中，利用封装好的 request 向后端发送 POST 请求，并通过 alert 弹出成功信息。

前端 Script 代码：

// 权限测试接口调用
    handleHonorAdd() {
      import('@/utils/request').then(({ default: request }) => {
        request({
          url: '/system/student/honor/add', // 必须对应后端接口的 @PostMapping 路径
          method: 'post',
          params: {
            studentName: '张三',
            honorName: '优秀班干部'
          }
        }).then(response => {
          // 成功后弹出后端返回的信息
          alert(response.msg);
        });
      });
    },

(图片说明：前端 methods 中的 handleHonorAdd 方法逻辑)

五、 最终效果验收

现在，我们退出管理员账号，使用刚刚分配了权限的测试账号（ry）登录系统。

1. 进入对应的管理页面，可以惊喜地发现，受权限保护的黄色 “菜单权限测试” 按钮成功渲染出来了。

(图片说明：测试账号登录后，页面成功展示了新增的黄色按钮)

2. 点击该按钮，浏览器发出请求，Network 状态码返回 200 OK，并成功弹出了后端返回的提示信息：“成功为学生[张三]添加荣誉：优秀班干部”！前后端权限链路彻底打通。

(图片说明：成功弹窗界面以及 F12 控制台返回的OK状态码)

六、 新手避坑指南（我的血泪 Debug 史）

在做这个作业的过程中，我遇到了几个非常经典的问题。如果你也遇到了权限不生效、按钮出不来、甚至页面不见了的情况，请一定要看这里！

踩坑一：忘记填写权限字符，或不小心多打了符号

一开始新增菜单时，我只填了名字，【权限字符】一栏空着没填。

解决方案： 前端的 v-hasPermi 和后端的 @PreAuthorize 就像是锁和钥匙，而菜单管理里的【权限字符】就是锁眼。如果不填，或者不小心多打了一个符号（比如手误打成了 honor::add），前端组件就无法被渲染，后端也会无情地报 403 Forbidden。必须确保三处字符串完全一致。

踩坑二：分配了按钮权限，但左侧菜单却消失了

当我迫不及待用测试账号登录时，发现左侧的“系统管理 -> 用户管理”菜单竟然凭空消失了，页面一片空白！

问题剖析与解决方案： 这就是若依动态路由菜单的严谨之处。我虽然在角色管理里给他勾选了“添加奖惩记录”的按钮权限，但我却忘记勾选外层的“用户管理”页面权限！ 系统判定：你连进这个房间的大门钥匙都没有，那我就连走廊都不展示给你了。

解决办法：回到超级管理员账号，在角色修改的菜单权限树中，不仅要勾选自定义的按钮，还必须勾选它的父级菜单（如“用户管理”及“用户查询”）。

(图片说明：正确的角色分配方式——同时勾选父级目录和子按钮)

七、总结

若依的权限管理是一套非常优秀的闭环：菜单定义权限 -> 角色分配权限 -> 前端控制显示 -> 后端拦截请求。理清了这个逻辑，再复杂的系统授权也能游刃有余！