1.7 KiB
1.7 KiB
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' },未登录时返回undefinedfetchUserInfo、fetchUsdcBalance:拉取并更新用户信息与余额fetchUserInfo兼容多种 API 字段名:userName/username、nickName/nickname、headerImg/avatar/avatarUrl;支持data直接为用户对象或data.user嵌套结构
使用方式
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()
扩展方式
- 多端登录:扩展
setUser支持多设备 token 管理 - Token 刷新:在
getAuthHeaders或请求拦截器中加入 refresh 逻辑 - 登出回调:在
logout中增加清理逻辑(如取消订阅、重置其他 store)
登录后刷新用户信息
钱包登录(Login.vue)成功后需调用 fetchUserInfo() 以获取完整用户信息(头像、昵称)。App.vue 在 onMounted 与 watch(isLoggedIn) 时也会调用,确保自动登录或刷新页面后能正确显示。