# user.ts (Store) **路径**:`src/stores/user.ts` ## 功能用途 用户登录态与基础信息的 Pinia Store,管理 token、user、余额,并提供鉴权请求头。登录数据持久化到 localStorage(键 `poly-user`)。 ## 核心能力 - `token`、`user`:登录凭证与用户信息 - `isLoggedIn`、`avatarUrl`:派生状态 - `balance`:USDC 余额显示(如 "0.00") - `setUser`:设置登录数据并持久化 - `logout`:清空并清除持久化 - `getAuthHeaders`:返回 `{ 'x-token', 'x-user-id' }`,未登录时返回 `undefined` - `fetchUserInfo`、`fetchUsdcBalance`:拉取并更新用户信息与余额 - `fetchUserInfo` 兼容多种 API 字段名:`userName`/`username`、`nickName`/`nickname`、`headerImg`/`avatar`/`avatarUrl`;支持 `data` 直接为用户对象或 `data.user` 嵌套结构 ## 使用方式 ```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. **多端登录**:扩展 `setUser` 支持多设备 token 管理 2. **Token 刷新**:在 `getAuthHeaders` 或请求拦截器中加入 refresh 逻辑 3. **登出回调**:在 `logout` 中增加清理逻辑(如取消订阅、重置其他 store) ## 登录后刷新用户信息 钱包登录(Login.vue)成功后需调用 `fetchUserInfo()` 以获取完整用户信息(头像、昵称)。App.vue 在 `onMounted` 与 `watch(isLoggedIn)` 时也会调用,确保自动登录或刷新页面后能正确显示。