Web3 登录流程拆解与工程化实现
- Henry Wei
- 发布于 2天前
- 阅读 95
本章拆解了 Web3 登录的完整流程，涵盖签名认证、JWT 获取与状态管理，明确前后端分工，并用 Zustand 构建可维护的登录架构，提升系统健壮性与用户体验。
📚 作者：Henry 🧱 系列：《Web2 到 Web3：登录与身份验证机制全面进化》 · 第 6 篇 👨💻 受众：Web2 & Web3 开发者 / 区块链学习者 👉 系列持续更新中，建议收藏专栏或关注作者
🧱 Web3 登录核心流程概览
① Frontend->>Wallet: 连接钱包 ② Frontend->>Backend: 请求签名消息（含 nonce） ③ Backend-->>Frontend: 返回 EIP-712 TypedData ④ Frontend->>Wallet: 发起签名请求 ⑤ Wallet-->>Frontend: 返回签名 ⑥ Frontend->>Backend: 提交签名 + 地址 ⑦ Backend->>JWT Service: 验签 & 生成 JWT ⑧ Backend-->>Frontend: 返回 accessToken ⑨ Frontend->>Frontend: 保存 Token & 登录状态
📌 职责划分：前后端界限清晰
| 阶段 | 前端职责 | 后端职责 |
|---|---|---|
| 连接钱包 | 获取地址 | - |
| 请求消息 | 调用 /auth/message |
返回 EIP-712 TypedData |
| 发起签名 | 调用 signTypedData(...) |
- |
| 提交验签 | /auth/verify 发送签名 |
使用 recoverTypedDataAddress 校验 |
| 生成 Token | - | JWT 签发，包含 address/ENS 等 |
| 存储状态 | 保持 token / 状态 | 仅做 stateless 校验 |
🧰 React + Zustand 登录状态架构设计
// stores/authStore.ts
import { create } from 'zustand';
type AuthState = {
address: `0x${string}` | null;
ensName: string | null;
token: string | null;
login: (data: { address: string; token: string; ensName?: string }) => void;
logout: () => void;
};
export const useAuthStore = create<AuthSta...
本文参与登链社区写作激励计划 ，好文好收益，欢迎正在阅读的你也加入。
