JWT 登录流程
sequenceDiagram
autonumber
participant User as 用户
participant Frontend as 前端应用
participant Server as 后端服务器
participant DB as 数据库
participant Auth as JWT 服务
User->>Frontend: 输入用户名/密码
Frontend->>Server: POST /api/login {username, password}
Server->>DB: 查询用户信息
DB-->>Server: 返回用户数据
alt 验证成功
Server->>Auth: 生成 JWT Token
Auth-->>Server: 返回 Token
Server-->>Frontend: 响应 {accessToken, refreshToken}
Frontend->>Frontend: 存储 Token (localStorage/cookie)
Frontend-->>User: 登录成功,跳转主页
else 验证失败
Server-->>Frontend: 401 错误信息
Frontend-->>User: 显示错误提示
end
Note over User,Auth: 后续请求流程
User->>Frontend: 访问受保护资源
Frontend->>Frontend: 携带 JWT Token
Frontend->>Server: GET /api/resource (Header: Authorization: Bearer Token)
Server->>Auth: 验证 Token 有效性
alt Token 有效
Auth-->>Server: 验证通过
Server->>DB: 获取请求数据
DB-->>Server: 返回数据
Server-->>Frontend: 返回资源数据
else Token 无效/过期
Auth-->>Server: 验证失败
Server-->>Frontend: 401 Unauthorized
Frontend->>Frontend: 刷新 Token 或重新登录
end
流程说明
登录阶段
- 用户在前端输入登录凭证
- 前端将凭证发送给后端 API
- 后端验证用户身份(查询数据库)
- 验证成功后,服务器生成 JWT Token
- 前端收到 Token 并存储
访问受保护资源阶段
- 用户请求受保护资源
- 前端从存储中读取 JWT Token
- 请求头中携带
Authorization: Bearer <token>
- 后端验证 Token 有效性
- 验证通过后返回请求资源
JWT Token 结构
Header.Payload.Signature
示例:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
- Header: 算法和类型
- Payload: 用户信息、过期时间等
- Signature: 防篡改签名