49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
# user.ts (Store)
|
||
|
||
**路径**：`src/stores/user.ts`
|
||
|
||
## 功能用途
|
||
|
||
用户登录态与基础信息的 Pinia Store，管理 token、user、余额，并提供鉴权请求头。登录数据持久化到 localStorage（键 `poly-user`）。
|
||
|
||
## 核心能力
|
||
|
||
- `token`、`user`：登录凭证与用户信息
|
||
- `isLoggedIn`、`avatarUrl`：派生状态
|
||
- `balance`：USDC 余额显示（如 "0.00"），支持 **UserSocket** 实时推送更新
|
||
- `setUser`：设置登录数据并持久化，登录成功后自动连接 UserSocket
|
||
- `logout`：清空并断开 UserSocket
|
||
- `getAuthHeaders`：返回 `{ 'x-token', 'x-user-id' }`，未登录时返回 `undefined`
|
||
- `fetchUserInfo`、`fetchUsdcBalance`：拉取并更新用户信息与余额；`fetchUserInfo` 兼容多种 API 字段名
|
||
- `connectUserSocket`、`disconnectUserSocket`：连接/断开 `sdk/userSocket` 的 UserSdk，用于订单/持仓/余额实时推送
|
||
|
||
## 使用方式
|
||
|
||
```typescript
|
||
import { useUserStore } from '@/stores/user'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
// 登录后设置
|
||
userStore.setUser({ token: 'xxx', user: { id: 1, nickName: 'User' } })
|
||
|
||
// 鉴权请求
|
||
const headers = userStore.getAuthHeaders()
|
||
if (headers) {
|
||
await someApiCall(undefined, { headers })
|
||
}
|
||
|
||
// 刷新余额
|
||
await userStore.fetchUsdcBalance()
|
||
```
|
||
|
||
## 扩展方式
|
||
|
||
1. **订单/持仓推送**：在 `connectUserSocket` 中注册 `onOrderUpdate`、`onPositionUpdate`，触发 Wallet 刷新
|
||
2. **多端登录**：扩展 `setUser` 支持多设备 token 管理
|
||
3. **Token 刷新**：在 `getAuthHeaders` 或请求拦截器中加入 refresh 逻辑
|
||
|
||
## 登录后刷新用户信息
|
||
|
||
钱包登录（Login.vue）成功后需调用 `fetchUserInfo()` 以获取完整用户信息（头像、昵称）。App.vue 在 `onMounted` 与 `watch(isLoggedIn)` 时也会调用，确保自动登录或刷新页面后能正确显示。
|