一、前言

在实际后台管理系统开发中，“权限管理”是核心功能之一。

本篇文章基于 Ruoyi-Vue 框架，结合课程实验与实际操作截图，完整讲解：

• 菜单权限的作用
• 前端按钮权限控制
• 后端接口权限验证
• @PreAuthorize 权限注解原理
• 自定义权限接口实现

---

二、什么是菜单权限？

在 Ruoyi-Vue 中：

“菜单权限” 本质上是一个权限标识字符串。

例如：

system:student:list
system:student:add
system:student:edit
system:student:remove

系统通过这些权限标识：

• 控制前端组件显示
• 控制后端接口访问

---

三、菜单权限管理

可以看到每个菜单都对应一个权限标识。

下面是我实际操作的学生信息的菜单权限配置：

菜单权限配置

功能	权限标识
查询	system:student:query
新增	system:student:add
修改	system:student:edit
删除	system:student:remove
导出	system:student:export
权限测试	system:student:permTest

---

四、前端权限控制

Ruoyi-Vue 前端通过        v-hasPermi        实现按钮显示控制。

<el-button
    type="info"
    plain
    icon="el-icon-check"
    size="mini"
    @click="handlePermTest"
    v-hasPermi="['system:student:permTest']"
>
权限测试
</el-button>

当前拥有        system:student:permTest        字符时权限按钮才显示。

否则按钮隐藏。

---

五、前端权限效果演示

1. 正常拥有权限时

可以看到：

• 新增
• 修改
• 删除
• 导出
• 权限测试

按钮全部显示。

2. 失去权限时

在角色管理页面修改其权限

可以看到：

• 新增
• 修改
• 删除
• 导出

按钮被显示。

六、查看开发者工具中的权限返回数据

接口获取当前登录用户的信息。

---

 

---