一、实验目的掌握在 RuoYi-Vue 框架中自定义后端接口并实现权限控制。掌握前端页面添加权限按钮、使用权限指令控制显示。掌握后台菜单管理新建权限、角色分配权限的完整流程。实现 “有权限可访问、无权限不可访问” 的安全控制。二、实验环境框架RuoYi-Vue 3.8.2后端SpringBoot、MySQL、Redis前端Vue2、ElementUI开发工具IDEA、VS Code三、实验内容与步骤1. 后端编写自定义权限接口新建StudentController.java添加接口并使用PreAuthorize做权限校验。文件路径ruoyi-system/src/main/java/com/ruoyi/system/controller/StudentController.java2. 前端添加权限按钮与请求方法在用户管理页面添加按钮使用v-hasPermi权限指令并编写请求方法。文件路径ruoyi-ui/src/views/system/user/index.vue3. 后台菜单管理新建权限按钮使用admin登录系统进入系统管理 → 菜单管理 → 新增配置如下菜单名称测试权限接口上级菜单用户管理菜单类型按钮权限标识system:student:permTest5. 前端运行测试启动后端8080启动前端npm run dev进入用户管理页面有权限按钮显示 → 点击弹出成功提示无权限按钮隐藏四、实验结果后端接口编写成功权限注解生效。前端权限指令v-hasPermi正常控制按钮显示。菜单权限新建、角色权限分配配置正确。点击按钮成功调用接口返回permTest success 权限验证通过!权限控制完整闭环有权限访问、无权限拒绝。五、实验总结RuoYi 权限核心菜单定义权限、角色分配权限、后端注解校验、前端指令控制。权限字符串必须前后端、菜单三处完全一致。修改权限后必须重新登录刷新缓存。自定义接口必须加PreAuthorize才能实现安全控制。前端按钮必须放在唯一根节点div classapp-container内部避免编译报错。
