fix(profile): 更新用户信息后同步auth上下文和localStorage
在头像和用户名修改成功后,更新auth上下文中的用户信息并同步到localStorage,保持状态一致
Showing
2 changed files
with
20 additions
and
3 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-24 13:04:21 | 2 | * @Date: 2025-03-24 13:04:21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-06-06 11:22:30 | 4 | + * @LastEditTime: 2025-06-09 11:47:32 |
| 5 | * @FilePath: /mlaj/src/views/profile/settings/AvatarSettingPage.vue | 5 | * @FilePath: /mlaj/src/views/profile/settings/AvatarSettingPage.vue |
| 6 | * @Description: 修改头像页面 | 6 | * @Description: 修改头像页面 |
| 7 | --> | 7 | --> |
| ... | @@ -65,7 +65,6 @@ const $route = useRoute(); | ... | @@ -65,7 +65,6 @@ const $route = useRoute(); |
| 65 | const { currentUser } = useAuth(); | 65 | const { currentUser } = useAuth(); |
| 66 | useTitle($route.meta.title); | 66 | useTitle($route.meta.title); |
| 67 | 67 | ||
| 68 | - | ||
| 69 | // 用户头像 | 68 | // 用户头像 |
| 70 | const userAvatar = ref(""); | 69 | const userAvatar = ref(""); |
| 71 | 70 | ||
| ... | @@ -165,6 +164,13 @@ const handleAvatarChange = async (file) => { | ... | @@ -165,6 +164,13 @@ const handleAvatarChange = async (file) => { |
| 165 | userAvatar.value = data.src; | 164 | userAvatar.value = data.src; |
| 166 | // 更新用户信息 | 165 | // 更新用户信息 |
| 167 | await updateUserInfoAPI({ avatar: data.src }); | 166 | await updateUserInfoAPI({ avatar: data.src }); |
| 167 | + // 更新auth上下文中的用户信息 | ||
| 168 | + currentUser.value = { | ||
| 169 | + ...currentUser.value, | ||
| 170 | + avatar: userAvatar.value | ||
| 171 | + }; | ||
| 172 | + // 更新localStorage中的用户信息 | ||
| 173 | + localStorage.setItem('currentUser', JSON.stringify(currentUser.value)); | ||
| 168 | showToast('头像上传成功'); | 174 | showToast('头像上传成功'); |
| 169 | } | 175 | } |
| 170 | } | 176 | } | ... | ... |
| ... | @@ -45,10 +45,14 @@ import FrostedGlass from '@/components/ui/FrostedGlass.vue'; | ... | @@ -45,10 +45,14 @@ import FrostedGlass from '@/components/ui/FrostedGlass.vue'; |
| 45 | import { getUserInfoAPI, updateUserInfoAPI } from '@/api/users'; | 45 | import { getUserInfoAPI, updateUserInfoAPI } from '@/api/users'; |
| 46 | import { showToast } from 'vant'; | 46 | import { showToast } from 'vant'; |
| 47 | import { useTitle } from '@vueuse/core'; | 47 | import { useTitle } from '@vueuse/core'; |
| 48 | +import { useAuth } from '@/contexts/auth'; | ||
| 48 | 49 | ||
| 49 | const $route = useRoute(); | 50 | const $route = useRoute(); |
| 50 | useTitle($route.meta.title); | 51 | useTitle($route.meta.title); |
| 51 | 52 | ||
| 53 | +// 获取用户认证状态 | ||
| 54 | +const { currentUser } = useAuth() | ||
| 55 | + | ||
| 52 | // 用户名 | 56 | // 用户名 |
| 53 | const username = ref(''); | 57 | const username = ref(''); |
| 54 | 58 | ||
| ... | @@ -72,8 +76,15 @@ const handleUsernameChange = async () => { | ... | @@ -72,8 +76,15 @@ const handleUsernameChange = async () => { |
| 72 | } | 76 | } |
| 73 | 77 | ||
| 74 | try { | 78 | try { |
| 75 | - const { code } = await updateUserInfoAPI({ name: username.value }); | 79 | + const { code, data } = await updateUserInfoAPI({ name: username.value }); |
| 76 | if (code) { | 80 | if (code) { |
| 81 | + // 更新auth上下文中的用户信息 | ||
| 82 | + currentUser.value = { | ||
| 83 | + ...currentUser.value, | ||
| 84 | + name: username.value | ||
| 85 | + }; | ||
| 86 | + // 更新localStorage中的用户信息 | ||
| 87 | + localStorage.setItem('currentUser', JSON.stringify(currentUser.value)); | ||
| 77 | showToast('用户名修改成功'); | 88 | showToast('用户名修改成功'); |
| 78 | } | 89 | } |
| 79 | } catch (error) { | 90 | } catch (error) { | ... | ... |
-
Please register or login to post a comment