修改头像显示问题

src/layout/components/Navbar.vue

@@ -26,7 +26,7 @@
       <div class="avatar-container">
         <el-dropdown @command="handleCommand" class="right-menu-item hover-effect">
           <div class="avatar-wrapper">
-            <img :src="userStore.avatar" class="user-avatar" alt=""/>
+            <img :src="avatar" class="user-avatar" alt=""/>
             <el-icon>
               <caret-bottom/>
             </el-icon>
@@ -51,6 +51,7 @@
 </template>
 
 <script setup>
+import {ref, onMounted} from 'vue'
 import {ElMessageBox} from 'element-plus'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
@@ -75,6 +76,15 @@ defineProps({
   }
 })
 
+const avatar = ref('')
+
+onMounted(() => {
+  const storedAvatar = localStorage.getItem("avatar")
+  if (storedAvatar) {
+    avatar.value = storedAvatar
+  }
+})
+
 function toggleSideBar() {
   appStore.toggleSideBar()
 }

src/layout/user-layout.vue

@@ -36,13 +36,13 @@
 
             <el-dropdown v-if="userStore.token" @command="handleCommand" class="">
               <div v-if="userStore.token" class="avatar-wrapper flex-align-center">
-                <img :src="userStore.avatar" class="user-avatar" alt=""/>
+                <img :src="avatar" class="user-avatar" alt=""/>
                 <div class="user-name">{{ userStore.name }}</div>
               </div>
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item command="logout">
-                    <span>退出登录</span>
+                    <span>退出登录2</span>
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
@@ -58,7 +58,7 @@
 </template>
 
 <script setup>
-import {computed} from 'vue'
+import {computed, onMounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import AppMain from '@/layout/components/AppMain.vue'
 import {categoryMenuNew} from '@/api/computingResource.js'
@@ -69,6 +69,15 @@ const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
 
+const avatar = ref('')
+
+onMounted(() => {
+  const storedAvatar = localStorage.getItem("avatar")
+  if (storedAvatar) {
+    avatar.value = storedAvatar
+  }
+})
+
 const activeMenu = computed(() => {
   const {meta, path, fullPath} = route
   if (meta.activeMenu) {

src/store/modules/user.js

@@ -56,9 +56,10 @@ const useUserStore = defineStore(
             } else {
               this.roles = ['ROLE_DEFAULT']
             }*/
-            this.id = user.id
-            this.name = user.nickname
-            this.avatar = avatar
+            this.id = user.id;
+            this.name = user.nickname;
+            this.avatar = avatar;
+            localStorage.setItem('avatar', this.avatar);
             resolve(res)
           }).catch(error => {
             reject(error)

src/views/login.vue

@@ -204,6 +204,7 @@ function handleLogin() {
             return acc
           }, {})
           useUserStore().getInfo().then(res => {
+            localStorage.setItem('avatar', res.data.avatar);
           })
           router.push({path: redirect.value || '/', query: otherQueryParams})
         }).catch(() => {