Ruoyi-Vue 自定义接口并配置菜单权限验证

一、前言Ruoyi-Vue 是国内非常流行的后台管理系统框架内置完整的用户、角色、菜单、权限体系。默认所有接口都有权限控制不登录不能访问、登录无权限也不能访问。本文目标自定义一个接口 → 配置权限 → 前端按钮控制显示 → 权限不足拦截 → 有权限正常访问。实现核心后端PreAuthorize ss.hasPermi()前端v-hasPermi 指令 后端返回权限列表数据库菜单表定义权限、角色表分配权限二、整体原理菜单定义权限 → 角色分配权限 → 用户绑定角色 → 登录后后端返回权限列表 → 前后端双重校验。前端用 v-hasPermi 控制按钮 / 菜单是否显示后端用 PreAuthorize 控制接口是否能被访问即使前端强制显示按钮后端依然拦截非法请求三、后端实现自定义接口并加权限注解路径ruoyi-admin\src\main\java\com\ruoyi\web\controller\system\MyStudentController.javaPreAuthorize(ss.hasPermi(system:test:query))表示访问该接口必须拥有 system:test:query 权限。权限标识 必须 和菜单管理里的权限标识一致。四、前端实现API 页面按钮1.API路径D:\Ruo\RuoYi-Vue-v3.8.2\RuoYi-Vue-v3.8.2\ruoyi-ui\src\api\system\student.js2. 页面添加按钮控制显示 调用接口路径ruoyi-ui\src\views\system\student\index.vue权限测试按钮导入测试接口api权限测试方法五、菜单权限配置六、角色分配权限七、测试登录1有权限用户登录2.无权限用户登录因为自定义菜单下面只有学生信息和权限测试所以取消用户的权限测试权限之后自定义菜单也消失了八、提交仓库仓库链接https://gitee.com/yuqianqian_comq/permission-verification.git九、总结本文完整演示了 Ruoyi-Vue 自定义接口并配置权限的全过程包含后端 Controller 代码前端 API 和页面代码菜单权限配置角色权限分配测试效果