smart
218 lines
7.4 KiB
Markdown
218 lines
7.4 KiB
Markdown
# 模块 4：第一天核心链路
|
||
|
||
<div class="mt-4 text-center text-sm">
|
||
|
||
```mermaid {scale: 0.75}
|
||
graph TD
|
||
A[用户登录] --> B[获取 token]
|
||
B --> C[获取用户信息]
|
||
C --> D[获取菜单路由]
|
||
D --> E[生成动态路由]
|
||
E --> F[进入系统页面]
|
||
F --> G[根据权限字符控制按钮]
|
||
```
|
||
|
||
</div>
|
||
|
||
<!--
|
||
下午我们进入第一天最重要的部分：调用链路分析。
|
||
|
||
若依案例的主线链路是：用户登录→获取 token→获取用户信息→获取菜单路由→生成动态路由→进入系统页面→根据权限字符控制按钮。
|
||
|
||
这条链路覆盖前端页面、API 调用、后端接口、用户角色、菜单权限、动态路由和按钮权限，非常适合训练陌生代码库理解。
|
||
-->
|
||
|
||
---
|
||
|
||
# 调用链路 8 个检查点
|
||
|
||
<div class="mt-6 grid grid-cols-4 gap-3 text-sm">
|
||
<div class="p-2 rounded bg-blue-900/20 text-center">1. 页面入口</div>
|
||
<div class="p-2 rounded bg-blue-900/20 text-center">2. UI 组件</div>
|
||
<div class="p-2 rounded bg-blue-900/20 text-center">3. 事件函数</div>
|
||
<div class="p-2 rounded bg-blue-900/20 text-center">4. API 调用</div>
|
||
<div class="p-2 rounded bg-emerald-900/20 text-center">5. 后端 Controller</div>
|
||
<div class="p-2 rounded bg-emerald-900/20 text-center">6. Service/权限</div>
|
||
<div class="p-2 rounded bg-amber-900/20 text-center">7. 前端状态更新</div>
|
||
<div class="p-2 rounded bg-amber-900/20 text-center">8. 路由/按钮生效</div>
|
||
</div>
|
||
|
||
<!--
|
||
若依的调用链路可以拆成 8 个检查点。
|
||
|
||
页面入口，比如登录页或用户管理页。
|
||
UI 组件，比如登录表单或新增按钮。
|
||
事件函数，比如 handleLogin。
|
||
API 调用，比如 login、getInfo、getRouters。
|
||
后端 Controller，比如登录接口、菜单路由接口。
|
||
Service 或权限逻辑，比如用户信息、角色权限、菜单树。
|
||
前端状态更新，比如保存 token、roles、permissions、routes。
|
||
最后是路由和按钮权限生效。
|
||
-->
|
||
|
||
---
|
||
|
||
# 登录认证链路示例
|
||
|
||
<div class="mt-4 text-sm">
|
||
|
||
用户输入账号密码 → Login 页面提交 → 调用 login API → 后端认证用户 → 返回 token → 前端保存 token → request 拦截器携带 token
|
||
|
||
**重点：** token 存在哪里？拦截器在哪里带 token？token 失效后如何处理？
|
||
</div>
|
||
|
||
<!--
|
||
登录认证链路是第一条主线。
|
||
|
||
用户在登录页面输入账号密码，提交表单，前端调用 login API。后端校验用户身份，成功后返回 token。前端保存 token，后续请求通过 request 拦截器携带 token。
|
||
|
||
这里要重点看三个问题：token 存在哪里，request 拦截器在哪里带 token，token 失效后如何处理。
|
||
-->
|
||
|
||
---
|
||
|
||
# 用户信息与权限加载链路
|
||
|
||
<div class="mt-4 text-sm">
|
||
|
||
登录成功 → 调用 getInfo → 后端返回 user/roles/permissions → 前端保存用户信息 → 前端保存角色和权限字符 → 后续用于按钮权限判断
|
||
|
||
**注意：** 前端拿到权限字符只能控制页面展示，不能作为后端安全边界
|
||
</div>
|
||
|
||
<!--
|
||
登录成功之后，系统通常会请求用户信息。
|
||
|
||
getInfo 这类接口会返回当前用户信息、角色列表、权限字符等。前端保存这些数据后，后续按钮权限就会依赖这些权限字符进行判断。
|
||
|
||
这里要注意：前端拿到权限字符只能控制页面展示，不能作为后端安全边界。真正的接口安全仍然需要后端权限校验。
|
||
-->
|
||
|
||
---
|
||
|
||
# 动态路由加载链路
|
||
|
||
<div class="mt-4 text-sm">
|
||
|
||
调用 getRouters → 后端返回菜单树 → 前端转换为路由对象 → 动态挂载路由 → 渲染侧边栏菜单 → 用户进入页面
|
||
|
||
</div>
|
||
|
||
<!--
|
||
若依的菜单和路由通常是动态加载的。
|
||
|
||
前端调用 getRouters，后端根据当前用户角色和菜单权限返回菜单树。前端把菜单树转换成路由对象，再动态挂载到 router 中。侧边栏根据这些路由渲染菜单。
|
||
|
||
这条链路很适合训练"从后端数据到前端页面"的完整理解。
|
||
-->
|
||
|
||
---
|
||
|
||
# 按钮权限链路
|
||
|
||
<div class="mt-4 text-sm">
|
||
|
||
菜单中配置权限字符 → 角色拥有该权限字符 → getInfo 返回 permissions → 前端权限指令/方法判断 → 控制按钮显示或隐藏
|
||
|
||
</div>
|
||
|
||
<!--
|
||
按钮权限的核心是权限字符。
|
||
|
||
在菜单管理中，按钮通常会配置类似"用户新增"、"用户修改"、"用户删除"这样的权限字符。角色被授权后，用户登录时会拿到对应权限字符。前端通过权限指令或权限判断方法，决定按钮是否显示。
|
||
|
||
再次强调：按钮隐藏只代表前端交互控制，不代表接口安全。
|
||
-->
|
||
|
||
---
|
||
|
||
# 后端接口权限链路
|
||
|
||
<div class="grid grid-cols-2 gap-6 mt-6">
|
||
<div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 text-sm">
|
||
|
||
**前端按钮权限** → 只能控制 UI 展示
|
||
</div>
|
||
<div class="p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-sm">
|
||
|
||
**后端接口权限** → 必须控制真实访问
|
||
|
||
需要确认：Controller 是否有权限注解？Service 是否校验数据权限？
|
||
</div>
|
||
</div>
|
||
|
||
<!--
|
||
这一页是权限分析的关键。
|
||
|
||
前端按钮权限只能控制 UI 展示。如果用户绕过前端、直接请求后端接口，那么真正决定是否安全的是后端接口权限。
|
||
|
||
所以在若依里，我们要检查 Controller 是否有权限注解，Service 是否处理数据权限。如果 AI 只看到前端按钮权限，就说"权限安全"，这是错误结论。
|
||
|
||
报告里必须区分前端权限和后端权限。
|
||
-->
|
||
|
||
---
|
||
|
||
# 操作日志链路
|
||
|
||
<div class="mt-4 text-sm">
|
||
|
||
管理员修改用户 → 调用后端接口 → Controller 执行业务 → 日志注解/AOP 记录操作 → 写入操作日志 → 操作日志页面查询
|
||
|
||
</div>
|
||
|
||
<!--
|
||
若依还有一个很适合训练的链路：操作日志。
|
||
|
||
比如管理员修改用户信息，前端调用后端接口，后端 Controller 执行业务逻辑。如果接口上配置了日志注解或 AOP，系统会记录操作人、操作模块、操作类型、请求参数、结果等信息。然后管理员可以在操作日志页面查看。
|
||
|
||
这条链路适合讲审计、日志脱敏和敏感操作追踪。
|
||
-->
|
||
|
||
---
|
||
|
||
# 调用链路分析 Prompt
|
||
|
||
<div class="mt-4 p-4 rounded-xl bg-blue-500/10 border border-blue-500/30 text-sm">
|
||
|
||
```
|
||
@workspace 请分析若依中"登录后菜单与按钮权限生效"的完整调用链路。
|
||
从用户登录开始，依次说明：
|
||
登录页面、登录API、token、getInfo、getRouters、
|
||
动态路由、侧边栏菜单、按钮权限、后端接口权限、不确定点。
|
||
每一步标注文件路径和函数名。
|
||
```
|
||
|
||
</div>
|
||
|
||
<!--
|
||
这是若依调用链路分析 Prompt。
|
||
|
||
注意，这个 Prompt 不是让 AI 总结权限系统，而是让它从用户登录开始，按顺序追踪链路。必须包含登录页面、登录 API、token、getInfo、getRouters、动态路由、侧边栏菜单、按钮权限、后端接口权限和不确定点。
|
||
|
||
每一步都要标注文件路径和函数名。
|
||
-->
|
||
|
||
---
|
||
|
||
# 产出：若依权限调用链路图
|
||
|
||
<div class="mt-6 text-sm">
|
||
|
||
- 登录认证链路图
|
||
- 用户信息加载链路图
|
||
- 动态菜单路由链路图
|
||
- 按钮权限链路图
|
||
- 后端接口权限链路图
|
||
- 操作日志链路图
|
||
|
||
</div>
|
||
|
||
<!--
|
||
这一部分的产出是若依权限调用链路图。
|
||
|
||
不是只画一条线，而是可以拆成几条子链路：登录认证、用户信息加载、动态菜单路由、按钮权限、后端接口权限、操作日志。
|
||
|
||
每条链路都要有依据文件和不确定点。
|
||
-->
|