目录
[🚪 Step 1：用户登录-->登录接口（生成凭证）](#🚪 Step 1：用户登录-->登录接口（生成凭证）)
[① 前端登录向后端发送请求](#① 前端登录向后端发送请求)
[② 后端生成token（用户通行证------>唯一身份的标识）](#② 后端生成token（用户通行证——>唯一身份的标识）)
[🚪 Step 2：获取权限信息（我是谁？我能干什么？）](#🚪 Step 2：获取权限信息（我是谁？我能干什么？）)
[① 前端登录之后调用的第一个重要接口编辑](#① 前端登录之后调用的第一个重要接口编辑)
[② 后端处理编辑](#② 后端处理编辑)
[🚪 Step 3： 获取动态路由 (菜单去哪了？)](#🚪 Step 3： 获取动态路由 (菜单去哪了？))
[① 前端如何控制菜单和按钮](#① 前端如何控制菜单和按钮)
[② 后端处理](#② 后端处理)
[🚪 Step 4： 接口级保护 (最后一道防线)](#🚪 Step 4： 接口级保护 (最后一道防线))
[① 前端点击菜单管理向后端发送请求](#① 前端点击菜单管理向后端发送请求)
[② 后端处理](#② 后端处理)
[🚪 Step 5：总结](#🚪 Step 5：总结)
[🚪 Step 1：后端---创建 Controller 接口](#🚪 Step 1：后端—创建 Controller 接口)
[🚪 Step 2：前端---新建菜单并配置权限](#🚪 Step 2：前端—新建菜单并配置权限)
[🚪 Step 3：前端---配置角色权限](#🚪 Step 3：前端—配置角色权限)
[🚪 Step 3：数据库更新说明](#🚪 Step 3：数据库更新说明)
[🚪 Step 4：前端 --- 修改页面，添加按钮](#🚪 Step 4：前端 — 修改页面，添加按钮)
[🚪 Step 5：测试验证](#🚪 Step 5：测试验证)
[🚪 Step 6：总结](#🚪 Step 6：总结)
1、若依（RuoYi）系统菜单权限的完整控制流程
2、分析源码
🚪 Step 1：用户登录-->登录接口（生成凭证）
① 前端登录向后端发送请求
② 后端生成token（用户通行证------>唯一身份的标识）
源码分析：当你在前端输入用户名和密码后，后端验证通过，会生成一个加密字符串token
理解：简单来说，就是用户登录时，后端给用户发送一个"通行证"（token），以后用户带着这个通行证来访问其他接口，后端就知道是谁在请求了
🚪 Step 2：获取权限信息（我是谁？我能干什么？）
① 前端登录之后调用的第一个重要接口
② 后端处理
🚪 Step 3： 获取动态路由 (菜单去哪了？)
① 前端如何控制菜单和按钮
按钮是否显示？
- 所有菜单来自
/getRouters接口（动态路由） - 但最终渲染时，会过滤掉没有权限的菜单项
② 后端处理
🚪 Step 4： 接口级保护 (最后一道防线)
① 前端点击菜单管理向后端发送请求
② 后端处理
🚪 Step 5：总结
-
Token (令牌)
- 前端 ：每次发请求（axios拦截器），都会自动在 Header 里带上
Authorization: Bearer <Token>。 - 后端：过滤器拦截请求，解析 Token，知道你是谁。
- 前端 ：每次发请求（axios拦截器），都会自动在 Header 里带上
-
Permission String (权限字符)
- 这是一个约定好的暗号，比如
system:user:add（新增用户）。 - 数据库 ：在菜单表中，给"新增用户"按钮配置字符
system:user:add。 - 后端：PreAuthorize 检查用户有没有这个字符。
- 前端 ：按钮上写
v-hasPermi="['system:user:add']"，如果有这个字符，按钮显示；没有，按钮消失。
- 这是一个约定好的暗号，比如
| 环节 | 后端 | 前端 |
|---|---|---|
| 权限来源 | 从 sys_role_menu 表查出菜单 → 提取 perms 字段 |
接收 /getInfo 返回的 permissions 数组 |
| 控制依据 | @PreAuthorize("@ss.hasPermi('xxx')") |
v-hasPermi="['xxx']" |
| 数据一致性 | 都来自同一个数据库表 | 都依赖同一个 permissions 列表 |
| 安全性 | 即使绕过前端，后端也会拦截 | 防止用户看到不该看的 |
3、自定义接口并添加权限注解
🚪 Step 1：后端---创建 Controller 接口
- 路径：
ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/BookController.java
- 然后启动服务：确保服务正常运行：
http://localhost:8080
🚪 Step 2：前端---新建菜单并配置权限
🚪 Step 3：前端---配置角色权限
- 此时，ry角色就拥有了system:book:test权限
🚪 Step 3：数据库更新说明
当保存菜单时，若依会自动更新数据库
-
表sys_menu中插入一条新纪录
-
表sys_role_menu中关联一条记录
🚪 Step 4：前端 --- 修改页面，添加按钮
-
路径：
src/views/system/student/index.vue
🚪 Step 5：测试验证
- 登录ry用户（普通用户）
🚪 Step 6：总结
| 步骤 | 操作 | 关键点 |
|---|---|---|
| 1️⃣ 后端 | 创建接口 + 加权限注解 | @PreAuthorize("@ss.hasPermi('system:test:permTest')") |
| 2️⃣ 前端 | 新建菜单（按钮） | 权限标识必须一致！ |
| 3️⃣ 前端 | 分配角色权限 | 普通角色勾选该按钮 |
| 4️⃣ 前端 | 编写按钮代码 | 使用 v-hasPermi + type="warning" |
| 5️⃣ 测试 | 普通用户登录测试 | 成功弹出消息 → 权限生效 |
- 若依权限 = 前端
v-hasPermi+ 后端@PreAuthorize+ 角色管理中的权限分配，三者必须完全一致才能生效。