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

前言本文记录了在若依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 :span1.5 el-button typeprimary plain iconel-icon-key sizemini clicktestPerm 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控制接口是否可访问两者共同保障系统安全。