若依框架：自定义接口与权限验证实践

前言

本文记录了在若依（RuoYi）管理系统中，从零开始自定义一个后端接口、配置菜单权限，到前端成功访问该接口的完整实践过程。

一、后端：自定义接口并设置权限

在SysUserController.java中新增如下接口：

关键代码及说明：

// @PreAuthorize 是若依封装的权限注解，调用接口时会检查当前用户是否拥有括号内的权限标识符 // 权限标识符格式通常为 模块:资源:操作，本例为 system:student:permTest @PreAuthorize("@ss.hasPermi('system:student:permTest')") @GetMapping("/permTest") public AjaxResult permTest() { // 接口成功访问时返回 permTest success 字符串 return AjaxResult.success("permTest success"); }

二、前端：添加权限测试按钮

在student/index.vue的按钮区域中添加权限测试按钮：

关键代码及说明：

<el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-key" size="mini" @click="testPerm" v-hasPermi="['system:student:permTest']" <!-- v-hasPermi 是若依框架提供的自定义指令，用于前端按钮级别的权限控制 --> <!-- 若当前用户不拥有 system:student:permTest 权限，该按钮将直接不渲染（DOM 中不存在） --> <!-- 前端的权限控制属于展示层控制，真正的安全保障依赖后端的 @PreAuthorize 注解 --> >权限测试</el-button> </el-col>

三、前端：调用接口的方法

在script中引入若依封装的request工具，并编写testPerm方法：

关键代码及说明：

// 若依框架中统一使用 @/utils/request 发起 HTTP 请求 // 不能使用 this.$http（未定义，会直接抛异常，导致即使有权限也显示"无权限访问"） import request from '@/utils/request' // methods 中添加： async testPerm() { try { // request 封装了统一的请求头（携带 Token）和响应拦截 // 返回的 res 已经是解包后的响应体，可直接取 res.msg const res = await request({ url: '/system/user/permTest', method: 'get' }); // 使用 this.$modal.msgSuccess / this.$modal.msgError 展示操作结果，符合若依 UI 规范 this.$modal.msgSuccess(res.msg); } catch (err) { this.$modal.msgError("无权限访问"); } },

四、系统配置：菜单与角色权限

仅有代码还不够，还需要在若依后台进行权限配置，否则接口会返回 403。

4.1 菜单管理中添加按钮权限

进入系统管理 → 菜单管理，在“系统工具 → 学生信息”下新建菜单，配置如下：

4.2 角色管理中分配权限

进入系统管理 → 角色管理，找到"普通角色"，点击修改，在菜单权限树中找到"系统工具 →学生信息 → 权限测试"并勾选，保存。

4.3 重新登录使权限生效

以“普通角色”的身份账户重新登陆若依系统：

若依的用户权限在登录时加载并缓存，修改角色权限后必须重新登录才能生效。

五、验证结果

配置完成并重新登录后，在“学生信息”页点击"权限测试"按钮：

页面弹出成功提示

接口返回{"msg": "permTest success", "code": 200}

说明自定义接口与权限验证均已生效。

六、总结

本次实践覆盖了若依权限体系的完整链路：

菜单管理（配置权限标识） ↓ 角色管理（为角色分配权限） ↓ 用户管理（用户绑定角色） ↓ 后端 @PreAuthorize（接口级校验） ↓ 前端 v-hasPermi（按钮级控制）

若依的权限体系是前后端双重校验的设计：前端通过v-hasPermi控制按钮是否显示，后端通过@PreAuthorize控制接口是否可访问，两者共同保障系统安全。