opt: 抽离 session 验证函数，修正前端路由覆盖 bug

web/src/action/session.js

@@ -0,0 +1,21 @@
+import {httpGet} from "@/utils/http";
+
+export function checkSession() {
+    return new Promise((resolve, reject) => {
+        httpGet('/api/user/session').then(res => {
+            resolve(res)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}
+
+export function checkAdminSession() {
+    return new Promise((resolve, reject) => {
+        httpGet('/api/admin/session').then(res => {
+            resolve(res)
+        }).catch(err => {
+            reject(err)
+        })
+    })
+}

web/src/components/admin/AdminHeader.vue

@@ -82,6 +82,7 @@ import {useRouter} from 'vue-router';
 import {ArrowDown, Expand, Fold} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import {checkAdminSession} from "@/action/session";
 
 const message = ref(5);
 const username = ref('极客学长')
@@ -93,7 +94,7 @@ const title = ref('Chat-Plus 控制台')
 const logo = ref('/images/logo.png')
 
 // 获取会话信息
-httpGet("/api/admin/session").then(() => {
+checkAdminSession().then(() => {
   // 加载系统配置
   httpGet('/api/admin/config/get?key=system').then(res => {
     title.value = res.data['admin_title'];

web/src/components/admin/AdminTags.vue

@@ -36,14 +36,24 @@
 import {useTagsStore} from '@/store/tags';
 import {onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router';
 import {ArrowDown, Close} from "@element-plus/icons-vue";
+import {checkAdminSession} from "@/action/session";
+import {ElMessageBox} from "element-plus";
 
-const route = useRoute();
 const router = useRouter();
+checkAdminSession().catch(() => {
+  ElMessageBox({
+    title: '提示',
+    message: "当前会话已经失效，请重新登录",
+    confirmButtonText: 'OK',
+    callback: () => router.replace('/admin/login')
+  });
+})
 const isActive = (path) => {
   return path === route.fullPath;
 };
 
 const tags = useTagsStore();
+const route = useRoute();
 // 关闭单个标签
 const closeTags = (index) => {
   const delItem = tags.list[index];

web/src/main.js

@@ -8,7 +8,6 @@ import NotFound from './views/404.vue'
 import Home from "@/views/Home.vue";
 import Login from "@/views/Login.vue"
 import Register from "@/views/Register.vue";
-import AdminLogin from "@/views/admin/Login.vue"
 import {createPinia} from "pinia";
 
 const routes = [
@@ -16,8 +15,6 @@ const routes = [
     {name: 'login', path: '/login', component: Login, meta: {title: '用户登录'}},
     {name: 'register', path: '/register', component: Register, meta: {title: '用户注册'}},
     {name: 'plus', path: '/chat', component: ChatPlus, meta: {title: 'ChatGPT-智能助手V3'}},
-    // {name: 'admin', path: '/admin', component: Admin, meta: {title: 'Chat-Plus 控制台'}},
-    {name: 'admin/login', path: '/admin/login', component: AdminLogin, meta: {title: 'Chat-Plus 控制台登录'}},
     {
         name: 'admin',
         path: '/admin',
@@ -27,61 +24,67 @@ const routes = [
         children: [
             {
                 path: '/admin/welcome',
-                name: 'home',
+                name: 'admin-home',
+                meta: {title: 'Chat-Plus 控制台登录'},
+                component: () => import('@/views/admin/Login.vue'),
+            },
+            {
+                path: '/admin/welcome',
+                name: 'admin-home',
                 meta: {title: '系统首页'},
                 component: () => import('@/views/admin/Welcome.vue'),
             },
             {
                 path: '/admin/system',
-                name: 'system',
+                name: 'admin-system',
                 meta: {title: '系统设置'},
                 component: () => import('@/views/admin/SysConfig.vue'),
             },
             {
                 path: '/admin/user',
-                name: 'user',
+                name: 'admin-user',
                 meta: {title: '用户管理'},
                 component: () => import('@/views/admin/UserList.vue'),
             },
             {
                 path: '/admin/role',
-                name: 'role',
+                name: 'admin-role',
                 meta: {title: '角色管理'},
                 component: () => import('@/views/admin/RoleList.vue'),
             },
             {
                 path: '/admin/apikey',
-                name: 'apikey',
+                name: 'admin-apikey',
                 meta: {title: 'API-KEY 管理'},
                 component: () => import('@/views/admin/ApiKey.vue'),
             },
             {
                 path: '/admin/loginLog',
-                name: 'loginLog',
+                name: 'admin-loginLog',
                 meta: {title: '登录日志'},
                 component: () => import('@/views/admin/LoginLog.vue'),
             },
             {
                 path: '/admin/demo/form',
-                name: 'form',
+                name: 'admin-form',
                 meta: {title: '表单页面'},
                 component: () => import('@/views/admin/demo/Form.vue'),
             },
             {
                 path: '/admin/demo/table',
-                name: 'table',
+                name: 'admin-table',
                 meta: {title: '数据列表'},
                 component: () => import('@/views/admin/demo/Table.vue'),
             },
             {
                 path: '/admin/demo/import',
-                name: 'import',
+                name: 'admin-import',
                 meta: {title: '导入数据'},
                 component: () => import('@/views/admin/demo/Import.vue'),
             },
             {
                 path: '/admin/demo/editor',
-                name: 'editor',
+                name: 'admin-editor',
                 meta: {title: '富文本编辑器'},
                 component: () => import('@/views/admin/demo/Editor.vue'),
             },

web/src/views/404.vue

@@ -1,17 +1,40 @@
 <template>
-  <div>{{ title }}</div>
+  <div class="page-404" :style="{ height: winHeight + 'px' }">
+    <div class="inner">
+      <h1>404</h1>
+      <h2>饶了地球一圈，还是没有找到您要的页面</h2>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
-import { defineComponent } from "vue"
+import {ref} from "vue"
 
-export default defineComponent({
+const winHeight = ref(window.innerHeight)
-  name: 'NotFound',
-  data () {
-    return {
-      title: "404 Page",
-
-    }
-  },
-})
 </script>
+
+<style lang="stylus" scoped>
+.page-404 {
+  display: flex;
+  justify-content: center;
+  background-color: #282c34;
+
+  .inner {
+    text-align center
+
+    h1 {
+      color: #202020;
+      font-size: 120px;
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    }
+
+    h2 {
+      color #ffffff;
+      font-weight: bold;
+    }
+  }
+
+}
+</style>

web/src/views/ChatPlus.vue

@@ -218,6 +218,7 @@ import {useRouter} from "vue-router";
 import Clipboard from "clipboard";
 import ConfigDialog from "@/components/ConfigDialog.vue";
 import PasswordDialog from "@/components/PasswordDialog.vue";
+import {checkSession} from "@/action/session";
 
 const title = ref('ChatGPT-智能助手');
 const logo = 'images/logo.png';
@@ -278,16 +279,6 @@ onMounted(() => {
   })
 });
 
-const checkSession = function () {
-  return new Promise((resolve, reject) => {
-    httpGet('/api/user/session').then(res => {
-      resolve(res)
-    }).catch(err => {
-      reject(err)
-    })
-  })
-}
-
 // 加载会话
 const loadChats = function () {
   httpGet("/api/chat/list?user_id=" + user.value.id).then((res) => {

web/src/views/Home.vue

@@ -1,40 +1,18 @@
 <template>
-  <div class="home" :style="{ height: winHeight + 'px' }">
   <h1>{{ title }}</h1>
-  </div>
 </template>
 
 <script setup>
 import {ref} from "vue"
-import {useRouter} from "vue-router"; // 导入useRouter函数
+import {useRouter} from "vue-router";
+import {checkSession} from "@/action/session";
 
 const title = ref("HI, ChatGPT PLUS!");
-const winHeight = ref(window.innerHeight)
 const router = useRouter();
-// onMounted(() => {
+checkSession().then(() => {
-//   if (isMobile()) {
+  router.push("chat")
-//     router.push("mobile");
+}).catch(() => {
-//   } else {
+  router.push("login")
-//     router.push("chat");
+})
-//   }
-// })
-
 
 </script>
-
-<style lang="stylus" scoped>
-.home {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #202020;
-  background-color: #282c34;
-
-  h1 {
-    font-size: 300%;
-    font-weight: bold;
-    letter-spacing: 0.1em;
-    text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
-  }
-}
-</style>