一、作业简介

本次基于 RuoYi-Vue 前后端分离框架，完成自定义接口 + 菜单权限 + 前端按钮权限控制全流程实操。实现效果：给新增接口配置权限标识，后台分配角色权限，前端通过指令控制按钮显隐、接口鉴权，无权限角色无法查看按钮、调用接口。

二、整体实现思路

1. 后端编写测试接口，使用注解配置权限标识；
2. 后台菜单管理新增按钮权限，绑定和接口一致的权限字符；
3. 角色管理给指定账号分配该按钮权限；
4. 前端页面添加测试按钮，结合框架权限指令控制显隐；
5. 前后端联调，验证权限拦截、按钮显隐、接口调用效果。

三、后端开发（RuoYi 后端）

1. 编写接口 Controller

新建 / 编写接口，使用 @PreAuthorize 注解绑定权限标识，示例代码：

java

运行

import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.ruoyi.common.core.domain.AjaxResult;

@RestController
@RequestMapping("/student")
public class StudentController {

    /**
     * 权限测试接口
     * 权限标识：system:student:permTest（前后端必须完全一致）
     */
    @GetMapping("/permTest")
    @PreAuthorize("@ss.hasPermi('system:student:permTest')")
    public AjaxResult permTest() {
        return AjaxResult.success("permTest success 权限验证通过！");
    }
}

• 核心：system:student:permTest 为全局唯一权限标识，后续菜单、前端必须和它保持一致。
• 注解 @PreAuthorize：框架原生接口鉴权，无权限访问直接返回 403。

2. 启动后端服务

找到启动类 RuoYiApplication.java，右键运行，控制台输出 Started RuoYiApplication 即为启动成功，默认端口 8080。

四、后台系统配置（权限核心步骤）

1. 新增按钮权限菜单

1. 使用 admin 超级管理员账号登录后台；
2. 进入 系统管理 → 菜单管理；
3. 选择对应上级菜单，点击新增，菜单类型选择按钮；
4. 填写菜单名称，权限标识严格填写：system:student:permTest，保存。

注意：非管理员账号新增菜单，仅当前账号可见，必须用 admin 统一配置。

2. 给角色分配权限

1. 进入 系统管理 → 角色管理；
2. 找到当前登录的普通角色，点击修改；
3. 切换到菜单权限标签页，勾选上一步新增的按钮权限；
4. 保存配置，退出账号重新登录（权限需要刷新）。

五、前端页面开发（RuoYi-Vue 前端）

1. 找到目标页面文件

1. 打开 IDEA，使用快捷键 Ctrl+Shift+N，搜索页面关键词（如 student）；
2. 打开对应 .vue 页面（本次为学生信息管理页面）。

2. 页面添加测试按钮

找到页面中搜索、重置按钮所在的 el-form-item 标签内，新增测试按钮，和原有按钮并排：

vue

<el-form-item>
  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  
  <!-- 权限测试按钮 -->
  <el-button 
    type="primary" 
    size="mini" 
    @click="testPermission"
    v-hasPermi="['system:student:permTest']"
  >权限测试</el-button>
</el-form-item>

• v-hasPermi：RuoYi 前端原生权限指令，有权限显示按钮，无权限自动隐藏；
• 指令内权限标识和后端、菜单配置保持一致。

3. 编写按钮点击事件

在当前 vue 文件的 methods 中添加点击方法，调用后端接口：

js

methods: {
  // 省略原有方法...
  
  // 权限测试按钮点击事件
  testPermission() {
    this.$http.get("/student/permTest")
      .then(res => {
        this.$modal.msgSuccess(res.msg);
      })
      .catch(err => {
        this.$modal.msgError("请求失败，无访问权限或后端未启动");
        console.log(err);
      });
  }
}

• $http：RuoYi 封装好的请求工具，无需额外引入 axios；
• $modal：框架弹窗组件，用于展示成功 / 失败提示。

4. 前端启动

执行命令启动前端：

bash

运行

npm run dev

编译成功后，浏览器访问默认地址 http://localhost。

六、功能测试 & 效果验证

测试场景 1：角色拥有权限

1. 使用已分配权限的账号登录，进入学生信息管理页面；
2. 页面正常展示【权限测试】按钮；
3. 点击按钮，弹窗提示：permTest success 权限验证通过！；
4. 结论：按钮显隐、接口调用、权限校验全部正常。

测试场景 2：角色无权限

1. 后台取消该角色对应按钮权限，账号退出重登；
2. 页面中【权限测试】按钮自动消失；
3. 手动调用接口，后端返回 403 无权限；
4. 结论：前端指令 + 后端注解双重权限拦截生效。

七、踩坑记录（重点总结）

1. Vue 编译报错：多个 template 根节点 问题：重复编写 <template> 标签，或根节点不唯一。 解决：所有内容放在同一个 <div class="app-container"> 根标签内，按钮不要写在根节点外。

2. 按钮添加后页面不显示 问题 1：按钮代码放在错误页面（改了 A 页面，去 B 页面查看）； 问题 2：v-hasPermi 权限指令生效，当前角色未分配权限； 问题 3：浏览器缓存，使用 Ctrl+F5 强制刷新。

3. 按钮可见，点击无反应 / 接口请求失败 问题 1：后端服务未启动，端口 8080 连接被拒绝； 问题 2：前后端权限标识字符不一致（大小写、空格、拼写错误）； 问题 3：角色分配权限后，未退出账号重新登录，权限未刷新。

4. 非管理员新增菜单看不到 解决：菜单、权限统一使用 admin 超级管理员配置。

实验过程截图