[后端作业W12] 菜单权限

一、作业概述

本次作业基于若依 Ruoyi-Vue 前后端分离框架，完成自定义接口开发、接口权限配置、菜单权限分配、前端权限验证全流程实现。

核心任务：

1. 后端编写自定义接口，并通过权限注解实现接口访问控制；
2. 前端配置权限按钮、API 请求，实现权限控制展示；
3. 系统后台完成菜单权限新建与角色权限分配；
4. 完成有权限 / 无权限用户的功能测试。

本次开发仅新增3 个核心文件，代码简洁完整，无缺失、无异常。

二、开发环境

框架：Ruoyi-Vue 前后端分离版

后端：SpringBoot、SpringSecurity

前端：Vue2 + ElementUI

权限控制：若依框架内置菜单权限 + 接口权限注解

三、实战步骤：自定义接口 + 权限验证

（一）后端开发：创建自定义接口并绑定权限

步骤1. 后端开发 —— 自定义权限接口

实现1 个权限测试接口，配置对应权限标识：

路径：A:\RuoYi-Vue-v3.8.2\RuoYi-Vue-v3.8.2\ruoyi-admin\src\main\java\com\ruoyi\web\controller\system\StuInfoController.java

核心说明：

@PreAuthorize：若依权限注解，用于校验用户是否拥有对应接口权限；

权限标识：stu:stuInfo:permTest，前后端必须保持完全一致；

接口访问成功后返回固定提示信息。

步骤 2：前端开发 —— API 请求封装

新增前端 API 文件：stuInfo.js

路径：A:\RuoYi-Vue-v3.8.2\RuoYi-Vue-v3.8.2\ruoyi-ui\src\api\stu\stuInfo.js

仅封装测试接口的请求方法。

步骤 3：前端开发 —— 权限按钮与页面调用

新增前端页面文件：index.vue通过v-hasPermi指令实现按钮权限控制，点击调用后端接口。

路径：A:\RuoYi-Vue-v3.8.2\RuoYi-Vue-v3.8.2\ruoyi-ui\src\views\stu\stuInfo\index.vue

核心说明：

v-hasPermi="['stu:stuInfo:permTest']：若依权限指令，无权限用户按钮自动隐藏；

点击按钮发起请求，验证接口权限是否生效。

步骤 4：菜单权限新建

操作路径：系统管理 → 菜单管理 → 新增

1. 一级目录：stu

这是最外层的目录，用来收纳所有学生相关的菜单，和后端接口的/stu前缀对应。

二级菜单：stuInfo

这是业务菜单，用来承载页面文件，和后端接口的/stu/stuInfo前缀对应。

三级按钮：permTest

说明：这就是权限控制的核心按钮，用来给角色分配stu:stuInfo:permTest权限。

总结：

• 一级目录（stu）：作为根目录，路由地址为stu，和后端接口的/stu前缀对应；
• 二级菜单（stuInfo）：业务菜单，路由地址为stuInfo，组件路径绑定到前端页面stu/stuInfo/index.vue；
• 三级按钮（permTest）：权限按钮，菜单类型选择「按钮」，权限标识配置为stu:stuInfo:permTest，和前后端代码中的权限标识完全一致。

步骤 5：功能测试 —— 权限验证效果

现在我登录admin管理员，给普通角色分配权限：

勾选刚才新建的权限测试按钮权限，保存后，该角色下的用户即可拥有此接口权限。

用另外一个浏览器登录ry（普通用户）来测试接口：

完整响应体：

页面状态：

可以看到点击按钮 → 调用接口成功 → 弹出提示：permTest success。

说明当前用户已经拥有stu:stuInfo:permTest权限，v-hasPermi指令生效；点击按钮后弹出permTest success提示框，说明接口调用成功。

接口返回验证（右侧 Network 面板）：

请求路径：/stu/stuInfo/permTest，和后端 Controller、前端 API 配置匹配；

响应结果：code:200，msg: "permTest success"，和后端代码里的返回内容完全一致；

状态码 200 说明接口请求成功，同时也通过了@PreAuthorize权限校验。

四、核心知识点总结

1. 权限核心：权限标识是前后端联通的关键，必须完全一致；
2. 后端控制：@PreAuthorize注解实现接口权限拦截；
3. 前端控制：v-hasPermi指令实现控件权限显示 / 隐藏；
4. 配置流程：新建菜单权限 → 分配角色权限 → 用户继承权限 → 接口生效。