实现登录

src/layouts/MainLayout.vue

@@ -45,12 +45,12 @@
           <div class="user-info">
             <el-dropdown>
               <span class="el-dropdown-link">
-                管理员 <el-icon><ArrowDown /></el-icon>
+                {{ username }} <el-icon><ArrowDown /></el-icon>
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item>个人信息</el-dropdown-item>
-                  <el-dropdown-item>退出登录</el-dropdown-item>
+                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -72,8 +72,8 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand } from '@element-plus/icons-vue';
 
 export default {
@@ -89,19 +89,31 @@ export default {
   },
   setup() {
     const route = useRoute();
+    const router = useRouter();
     const isCollapse = ref(false);
+    const username = ref(localStorage.getItem('username') || '管理员');
+
+    // 监听localStorage变化，实时更新用户名
+    const handleStorageChange = () => {
+      username.value = localStorage.getItem('username') || '管理员';
+    };
+
+    onMounted(() => {
+      window.addEventListener('storage', handleStorageChange);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('storage', handleStorageChange);
+    });
     
-    // 切换侧边栏折叠状态
     const toggleCollapse = () => {
       isCollapse.value = !isCollapse.value;
     };
     
-    // 当前激活的菜单项
     const activeMenu = computed(() => {
       return route.path;
     });
 
-    // 当前页面标题
     const currentPageTitle = computed(() => {
       const routeMap = {
         '/': '系统首页',
@@ -111,11 +123,20 @@ export default {
       return routeMap[route.path] || '猪场管理系统';
     });
 
+    const logout = () => {
+      localStorage.removeItem('jwt_token');
+      localStorage.removeItem('username'); // 清除用户名
+      username.value = '管理员'; // 重置显示
+      router.push('/login');
+    };
+
     return {
       isCollapse,
       activeMenu,
       currentPageTitle,
-      toggleCollapse
+      toggleCollapse,
+      logout,
+      username
     };
   }
 };