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

流程说明

登录阶段

  1. 用户在前端输入登录凭证
  2. 前端将凭证发送给后端 API
  3. 后端验证用户身份(查询数据库)
  4. 验证成功后,服务器生成 JWT Token
  5. 前端收到 Token 并存储

访问受保护资源阶段

  1. 用户请求受保护资源
  2. 前端从存储中读取 JWT Token
  3. 请求头中携带 Authorization: Bearer <token>
  4. 后端验证 Token 有效性
  5. 验证通过后返回请求资源

JWT Token 结构

Header.Payload.Signature

示例:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

- Header: 算法和类型
- Payload: 用户信息、过期时间等
- Signature: 防篡改签名