feat(user): 实现登录状态实时更新

- 使用 useUser Hook集中管理用户状态
- 登录成功后实时更新 Header 和 UserCard 组件
- 移除页面刷新操作,提升用户体验- 添加登录成功提示
This commit is contained in:
2025-09-05 12:14:46 +08:00
parent 0494fd01d0
commit 4ae36bc727
3 changed files with 218 additions and 112 deletions

View File

@@ -14,12 +14,15 @@ import {useUserData} from "@/hooks/useUserData";
function UserCard() {
const {
isAdmin
user,
isLoggedIn,
loginUser,
fetchUserInfo,
isAdmin,
getDisplayName,
getRoleName
} = useUser();
const { data, refresh } = useUserData()
const {getDisplayName, getRoleName} = useUser();
const [IsLogin, setIsLogin] = useState<boolean>(false)
const [userInfo, setUserInfo] = useState<User>()
const [couponCount, setCouponCount] = useState(0)
const [pointsCount, setPointsCount] = useState(0)
const [giftCount, setGiftCount] = useState(0)
@@ -77,41 +80,31 @@ function UserCard() {
// })
}
const reload = () => {
Taro.getUserInfo({
success: (res) => {
const avatar = res.userInfo.avatarUrl;
setUserInfo({
avatar,
nickname: res.userInfo.nickName,
sexName: res.userInfo.gender == 1 ? '男' : '女'
})
getUserInfo().then((data) => {
if (data) {
setUserInfo(data)
setIsLogin(true);
Taro.setStorageSync('UserId', data.userId)
// 加载用户统计数据
if (data.userId) {
loadUserStats(data.userId)
}
// 获取openId
if (!data.openid) {
Taro.login({
success: (res) => {
getWxOpenId({code: res.code}).then(() => {
})
}
})
}
const reload = async () => {
// 如果已登录,获取最新用户信息
if (isLoggedIn) {
try {
const data = await fetchUserInfo();
if (data) {
// 加载用户统计数据
if (data.userId) {
loadUserStats(data.userId)
}
}).catch(() => {
console.log('未登录')
});
// 获取openId
if (!data.openid) {
Taro.login({
success: (res) => {
getWxOpenId({code: res.code}).then(() => {
})
}
})
}
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
});
}
};
const showAuthModal = () => {
@@ -180,10 +173,21 @@ function UserCard() {
return false;
}
// 登录成功
Taro.setStorageSync('access_token', res.data.data.access_token)
Taro.setStorageSync('UserId', res.data.data.user.userId)
setUserInfo(res.data.data.user)
setIsLogin(true)
const token = res.data.data.access_token;
const userData = res.data.data.user;
// 使用useUser Hook的loginUser方法更新状态
loginUser(token, userData);
// 显示登录成功提示
Taro.showToast({
title: '登录成功',
icon: 'success',
duration: 1500
})
// 刷新页面数据
reload();
}
})
} else {
@@ -209,17 +213,17 @@ function UserCard() {
<View className={'user-card-header flex w-full justify-between items-center pt-4'}>
<View className={'flex items-center mx-4'}>
{
IsLogin ? (
<Avatar size="large" src={userInfo?.avatar} shape="round"/>
isLoggedIn ? (
<Avatar size="large" src={user?.avatar} shape="round"/>
) : (
<Button className={'text-black'} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
<Avatar size="large" src={userInfo?.avatar} shape="round"/>
<Avatar size="large" src={user?.avatar} shape="round"/>
</Button>
)
}
<View className={'user-info flex flex-col px-2'}>
<View className={'py-1 text-black font-bold'}>{getDisplayName()}</View>
{IsLogin ? (
{isLoggedIn ? (
<View className={'grade text-xs py-1'}>
<Tag type="success" round>
<Text className={'p-1'}>