退出登录位置

activitylink/src/router/index.js

@@ -1,3 +1,4 @@
+import { ElMessage } from 'element-plus';
 import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
     {
@@ -75,5 +76,13 @@ const router = createRouter({
   history: createWebHistory('/testBack/'),
     routes
 })
-// 导出
+router.beforeEach((to, from, next) => {
+  const token = localStorage.getItem("token");
+  if (to.name != "homePage" && !token) {
+      next('/homePage');
+      ElMessage.error('请先登录！');
+  }
+  next();
+})
+// 暴露
 export default router

activitylink/src/views/zhongchou/index.vue

@@ -1,4 +1,3 @@
-
 <script setup>
 import {
   Promotion,
@@ -25,15 +24,14 @@ const handleLogout = () => {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => {
+  }).then(async () => {
     // 点击确定，跳转到登录页
-    const response = adminlogout(
+    const response = await adminlogout(
       {
         token: localStorage.getItem('token')
       }
     )
-    if(response.code === 200)
-    {
+    if (response.code === 200) {
       router.push('/homePage');
       localStorage.removeItem('token');
       ElMessage.success('退出成功')
@@ -51,70 +49,71 @@ const handleLogout = () => {
 
 <template>
   <div class="common-layout">
-      <el-container class="el-container">
-        <!-- 左侧菜单 -->
-        <el-aside class="aside">
-          <el-menu
-            active-text-color="#ffd04b"
-            background-color="#545c64"
-            class="el-menu-vertical-demo"
-            default-active="/index"
-            text-color="#fff"
-            @open="handleOpen"
-            @close="handleClose"
-            style="height: 100%;"
-            router
-          >
-            <el-menu-item index="/zhongchou/mainimg" >
-              <el-icon><Promotion /></el-icon> 
-              <span>后台管理系统</span>
-            </el-menu-item>
-            
-            <el-menu-item index="/zhongchou/levelManagement" >
-              <el-icon><location /></el-icon>
-              <span>等级管理</span>
-            </el-menu-item>
-            
-            <el-menu-item index="/zhongchou/giftManagement" >
-              <el-icon><icon-menu /></el-icon>
-              <span>礼品管理</span>
-            </el-menu-item>
-            
-            <el-menu-item index="/zhongchou/winningManagement">
-              <el-icon><document /></el-icon>
-              <span>中奖管理</span>
-            </el-menu-item>
-            
-            <el-menu-item index="/zhongchou/activityManagement">
-              <el-icon><HelpFilled /></el-icon>
-              <span>活动管理</span>
-            </el-menu-item>
+    <el-container class="el-container">
+      <!-- 左侧菜单 -->
+      <el-aside class="aside">
+        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
+          default-active="/index" text-color="#fff" @open="handleOpen" @close="handleClose" style="height: 100%;"
+          router>
+          <el-menu-item index="/zhongchou/mainimg">
+            <el-icon>
+              <Promotion />
+            </el-icon>
+            <span>后台管理系统</span>
+          </el-menu-item>
+
+          <el-menu-item index="/zhongchou/levelManagement">
+            <el-icon>
+              <location />
+            </el-icon>
+            <span>等级管理</span>
+          </el-menu-item>
+
+          <el-menu-item index="/zhongchou/giftManagement">
+            <el-icon><icon-menu /></el-icon>
+            <span>礼品管理</span>
+          </el-menu-item>
+
+          <el-menu-item index="/zhongchou/winningManagement">
+            <el-icon>
+              <document />
+            </el-icon>
+            <span>中奖管理</span>
+          </el-menu-item>
 
-            <el-menu-item index="/zhongchou/userManagement">
-              <el-icon><User /></el-icon>
-              <span>用户管理</span>
-            </el-menu-item>
+          <el-menu-item index="/zhongchou/activityManagement">
+            <el-icon>
+              <HelpFilled />
+            </el-icon>
+            <span>活动管理</span>
+          </el-menu-item>
 
-            <el-menu-item index="/zhongchou/logout" @click="handleLogout">
-              <el-icon><Setting /></el-icon>
-              <span>退出登录</span>
-            </el-menu-item>
-          </el-menu>
-        </el-aside>
-        
-        <el-main class="el-main">
-          <router-view></router-view>
-        </el-main>
-      </el-container>
+          <el-menu-item index="/zhongchou/userManagement">
+            <el-icon>
+              <User />
+            </el-icon>
+            <span>用户管理</span>
+          </el-menu-item>
+          <!-- 
+          <el-menu-item index="/zhongchou/logout" @click="handleLogout">
+            <el-icon>
+              <Setting />
+            </el-icon>
+            <span>退出登录</span>
+          </el-menu-item> -->
+        </el-menu>
+      </el-aside>
+      <el-header class="el-header">
+        <el-button type="primary" @click="handleLogout">退出登录</el-button>
+      </el-header>
+      <el-main class="el-main">
+        <router-view></router-view>
+      </el-main>
+    </el-container>
   </div>
 </template>
 
 <style scoped>
-a {
-  color: white;
-  text-decoration: none;
-}
-
 .aside {
   width: 220px;
   border-right: 1px solid #ccc;
@@ -134,8 +133,15 @@ a {
 }
 
 .el-main {
-  flex: 1; /* 关键：自动撑满剩余空间 */
+  flex: 1;
+  /* 关键：自动撑满剩余空间 */
   padding: 20px;
   overflow: auto;
 }
+
+.el-header {
+  position: fixed;
+  right: 20px;
+  top: 20px;
+}
 </style>