hookehuyr

fix(profile): 更新用户信息后同步auth上下文和localStorage

在头像和用户名修改成功后,更新auth上下文中的用户信息并同步到localStorage,保持状态一致
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) {
......