这份只讲一件事：

前端输入账号密码后，到底发生了什么

如果你现在只想先弄懂登录，这一份最适合你。

---

1. 先别看代码，先看生活版理解

你去一个工地办公室，门口有保安。

流程是：

你报出身份
-> 保安检查你是不是登记人员
-> 如果是，给你一个通行证
-> 你拿着通行证进去

这个项目登录也是一样：

输入账号密码
-> 后端检查
-> 后端发 token
-> 前端保存 token
-> 前端进入系统

术语（token，通行证）： 它不是账号密码本身，而是“你已经通过检查”的证明。

---

2. 登录流程总图

登录页 Login.tsx
-> 调用 useAuthStore.ts 里的 login()
-> 调用 api/client.ts 里的登录接口
-> 请求后端 server.go
-> 后端查数据库
-> 后端返回 token
-> 前端保存 token
-> 跳到 dashboard

你现在只要记住上面这 8 步就够了。

---

3. 第 1 个文件：Login.tsx

文件： frontend/src/pages/Login.tsx

它的作用非常简单：

负责显示登录页面
负责接收你输入的用户名和密码
负责在你点按钮时，触发登录动作

你可以把它看成“前台接待”。

关键位置：

• 表单：frontend/src/pages/Login.tsx:229-239
• 用户名框：frontend/src/pages/Login.tsx:250-257
• 密码框：frontend/src/pages/Login.tsx:259-266
• 点击登录后的逻辑：frontend/src/pages/Login.tsx:131-145

最关键的是这里：

点登录
-> 执行 onFinish
-> 调用 login(values)

也就是说：

Login.tsx 自己不负责判断密码对不对。
它只是把你输入的内容交出去。

---

4. 第 2 个文件：useAuthStore.ts

文件： frontend/src/stores/useAuthStore.ts

这个文件是登录真正的“指挥中心”。

它做了 4 件事：

1. 发登录请求
2. 接收后端返回的 token
3. 保存 token
4. 再去拿当前用户信息

关键位置：

• login()：frontend/src/stores/useAuthStore.ts:24-57

你可以把这段逻辑理解成：

把用户名密码发给后端
-> 如果成功，拿到 token
-> 把 token 保存起来
-> 再请求“我是谁”
-> 如果都成功，返回 true

里面最关键的几行：

• 发请求：frontend/src/stores/useAuthStore.ts:28
• 取 token：frontend/src/stores/useAuthStore.ts:29
• 保存 token：frontend/src/stores/useAuthStore.ts:31-33
• 再拿用户信息：frontend/src/stores/useAuthStore.ts:35-41

你现在可以先把 useAuthStore.ts 理解成：

登录总管

---

5. 第 3 个文件：api/client.ts

文件： frontend/src/api/client.ts

这个文件的作用是：

专门负责“发请求”

这里有两个你要知道的东西。

第一：登录接口在这里

关键位置：

• 登录接口：frontend/src/api/client.ts:188-190

意思就是：

把用户名密码发到后端的 /api/v1/auth/login

---

第二：以后别的请求会自动带 token

关键位置：

• 请求拦截器：frontend/src/api/client.ts:22-32

这段逻辑的意思很简单：

每次前端要请求后端时
-> 先看看本地有没有 token
-> 如果有，就自动带上

所以前端不用每次都重新登录。

---

6. 第 4 个文件：server.go

文件： backend/internal/api/server.go

这是后端接请求的地方。

你现在只看登录相关的部分就够了。

关键位置：

• 登录路由注册：backend/internal/api/server.go:80-84
• 登录处理函数：backend/internal/api/server.go:119-148

后端收到登录请求后，做的是：

读取用户名密码
-> 查数据库
-> 检查密码
-> 如果对，就生成 token
-> 把 token 返回给前端

这一步你可以理解成“保安检查身份证”。

---

7. 后端去哪里查账号

它去数据库查。

用户表结构在：

• backend/internal/models/models.go:24-31

数据库初始化逻辑在：

• backend/internal/db/db.go:128-166

默认管理员配置在：

• backend/internal/config/config.go:81-84

所以登录不是“前端自己觉得你对了就行”，而是后端真的去数据库检查。

---

8. token 保存在哪里

文件： frontend/src/utils/authToken.ts

关键位置：

• 读取 token：frontend/src/utils/authToken.ts:4-11
• 保存 token：frontend/src/utils/authToken.ts:13-25

简单记：

登录成功
-> token 被保存到浏览器里
-> 以后请求时再拿出来用

---

9. 为什么登录后能进 dashboard

因为登录成功后，Login.tsx 里会执行跳转。

关键位置：

• frontend/src/pages/Login.tsx:141-145

意思就是：

如果 login(values) 返回成功
-> 页面跳到 /dashboard

---

10. 为什么没登录会被赶回登录页

文件： frontend/src/App.tsx

关键位置：

• ProtectedRoute：frontend/src/App.tsx:19-33
• 没 token 就跳回登录页：frontend/src/App.tsx:28-30

你可以把它看成系统里的“门卫”：

有 token
-> 放行

没 token
-> 回登录页

---

11. 你现在只需要记住的最短版本

登录的最短流程

输入账号密码
-> 前端发给后端
-> 后端检查
-> 后端返回 token
-> 前端保存 token
-> 跳转到 dashboard

4 个最关键文件

Login.tsx            负责收集输入
useAuthStore.ts      负责登录总流程
api/client.ts        负责发请求
server.go            负责后端校验