From c6c6df9c570ef8bd7963687790c2e194a6cac616 Mon Sep 17 00:00:00 2001
From: Kunagisa <1549184870@qq.com>
Date: Sat, 14 Jun 2025 22:08:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=B7=E6=96=B0=E5=A4=9A=E6=AD=A4=E4=BC=9A?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E5=88=B0=E7=99=BB=E9=99=86=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E8=A7=A3=E5=86=B3=E4=BA=86=EF=BC=8C=E4=BD=86=E6=98=AF?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E4=BC=9A=E5=87=BA=E7=8E=B0=E6=9B=B4=E9=80=86?=
 =?UTF-8?q?=E5=A4=A9=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/axiosConfig.js          | 77 +++++++++++++++++----------------
 src/components/login_module.vue |  8 ++--
 src/main.js                     |  6 +++
 src/router/index.js             | 64 ++++++++++++++-------------
 src/utils/jwt.js                | 40 +++++++++++------
 5 files changed, 110 insertions(+), 85 deletions(-)

diff --git a/src/api/axiosConfig.js b/src/api/axiosConfig.js
index 9cea5f0..850087c 100644
--- a/src/api/axiosConfig.js
+++ b/src/api/axiosConfig.js
@@ -13,48 +13,49 @@ const axiosInstance = axios.create({
     timeout: 10000
 });
 
-/**
- * 请求拦截器
- * - 对需要认证的请求，在请求头中添加Authorization
- * - 对登录、注册和获取列表的请求，不添加Authorization
- */
-axiosInstance.interceptors.request.use(
-    config => {
-        const token = localStorage.getItem('access_token');
-        const url = config.url;
+export function setupInterceptors() {
+    /**
+     * 请求拦截器
+     * - 对需要认证的请求，在请求头中添加Authorization
+     * - 对登录、注册和获取列表的请求，不添加Authorization
+     */
+    axiosInstance.interceptors.request.use(
+        config => {
+            const token = localStorage.getItem('access_token');
+            const url = config.url;
 
-        // 定义不需要Token的接口条件
-        const noAuthRequired = 
-            url === '/user/login' || 
-            url === '/user/register' || // 明确添加注册接口
-            url.endsWith('/getlist');
+            // 定义不需要Token的接口条件
+            const noAuthRequired = 
+                url === '/user/login' || 
+                url === '/user/register';
 
-        if (token && !noAuthRequired) {
-            config.headers.Authorization = `Bearer ${token}`;
+            if (token && !noAuthRequired) {
+                config.headers.Authorization = `Bearer ${token}`;
+            }
+            return config;
+        },
+        error => {
+            return Promise.reject(error);
         }
-        return config;
-    },
-    error => {
-        return Promise.reject(error);
-    }
-);
+    );
 
-/**
- * 响应拦截器
- * - 如果收到401错误（未授权），并且不是来自登录请求，则调用logoutUser函数清除用户凭证
- */
-axiosInstance.interceptors.response.use(
-    response => response,
-    error => {
-        const originalRequest = error.config;
-        
-        // 如果收到401错误，并且不是来自登录请求本身
-        if (error.response && error.response.status === 401 && originalRequest.url !== '/user/login') {
-            logoutUser(); // 调用简化的logoutUser，它只清除token，不导航
+    /**
+     * 响应拦截器
+     * - 如果收到401错误（未授权），并且不是来自登录请求，则调用logoutUser函数清除用户凭证
+     */
+    axiosInstance.interceptors.response.use(
+        response => response,
+        error => {
+            const originalRequest = error.config;
+            
+            // 如果收到401错误，并且不是来自登录请求本身
+            if (error.response && error.response.status === 401 && originalRequest.url !== '/user/login') {
+                logoutUser(); // 调用简化的logoutUser，它只清除token，不导航
+            }
+            // 不需要额外的console.error，错误会自然地在调用处被捕获或显示在网络请求中
+            return Promise.reject(error);
         }
-        // 不需要额外的console.error，错误会自然地在调用处被捕获或显示在网络请求中
-        return Promise.reject(error);
-    }
-);
+    );
+}
 
 export default axiosInstance; 
\ No newline at end of file
diff --git a/src/components/login_module.vue b/src/components/login_module.vue
index 4db10e3..138b52a 100644
--- a/src/components/login_module.vue
+++ b/src/components/login_module.vue
@@ -112,9 +112,6 @@ const refreshCaptcha = async () => {
   }
 }
 
-onMounted(() => {
-  refreshCaptcha()
-})
 
 const handleLogin = async () => {
   try {
@@ -203,6 +200,11 @@ const validateForm = () => {
 
   return true
 }
+
+onMounted(() => {
+  refreshCaptcha()
+})
+
 </script>
 
 <style scoped>
diff --git a/src/main.js b/src/main.js
index f4c0b0a..2da4223 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,13 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/styles/common.css'
+import { setupInterceptors } from './api/axiosConfig'; // 导入拦截器设置函数
+
+// 在应用初始化最开始就设置好拦截器
+setupInterceptors();
 
 const app = createApp(App)
+
 app.use(router)
+
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index f0e012a..83439c8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { hasValidToken, getUserInfo, logoutUser } from '../utils/jwt';
+import { hasValidToken, getUserInfo, logoutUser, getStoredUser } from '../utils/jwt';
 import { justLoggedIn } from '../utils/authSessionState';
 import EditorsMaps from '@/views/index/EditorsMaps.vue'
 
@@ -112,41 +112,45 @@ const router = createRouter({
 // 路由守卫
 router.beforeEach(async (to, from, next) => {
   const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
-  
-  if (requiresAuth) {
-    const tokenExists = hasValidToken();
 
-    if (justLoggedIn.value) {
-        justLoggedIn.value = false;
-        if (tokenExists) {
-            next();
-        } else {
-            logoutUser();
-            next({ path: '/backend/login', query: { redirect: to.fullPath, sessionExpired: 'true' }});
-        }
-        return;
-    }
+  if (!requiresAuth) {
+    return next(); // 如果页面不需要认证，直接放行
+  }
 
-    if (tokenExists) {
-      const user = await getUserInfo();
-      if (user) {
-        next();
-      } else {
-        logoutUser();
-        next({
-          path: '/backend/login',
-          query: { redirect: to.fullPath, sessionExpired: 'true' } 
-        });
-      }
-    } else {
-      next({
+  // 方案1: 检查SessionStorage中是否已有用户信息 (刷新后最先检查这里)
+  if (getStoredUser()) {
+    return next();
+  }
+
+  // 方案2: 如果刚登录过，直接放行
+  if (justLoggedIn.value) {
+    justLoggedIn.value = false;
+    // 此时token肯定有效，但可能还没来得及请求用户信息
+    // 为确保用户信息被存储，可以调用一次，但不阻塞导航
+    getUserInfo().catch(err => console.error("Error fetching user info after login:", err));
+    return next();
+  }
+
+  // 方案3: 检查localStorage中是否有token (刷新后SessionStorage没有用户信息时)
+  if (hasValidToken()) {
+    try {
+      await getUserInfo(); // 尝试获取用户信息，该函数会把用户信息存入SessionStorage
+      return next(); // 获取成功，放行
+    } catch (error) {
+      // 获取失败 (token无效, 网络问题等)
+      logoutUser(); // 清除所有凭证
+      return next({
         path: '/backend/login',
-        query: { redirect: to.fullPath }
+        query: { redirect: to.fullPath, sessionExpired: 'true' }
       });
     }
-  } else {
-    next();
   }
+
+  // 方案4: 如果以上条件都不满足，跳转登录页
+  return next({
+    path: '/backend/login',
+    query: { redirect: to.fullPath }
+  });
 });
 
 export default router 
\ No newline at end of file
diff --git a/src/utils/jwt.js b/src/utils/jwt.js
index e061d0f..368278c 100644
--- a/src/utils/jwt.js
+++ b/src/utils/jwt.js
@@ -4,6 +4,23 @@ import { justLoggedIn } from './authSessionState'; // Import the flag
 
 const USER_INFO_URL = '/user'; // 获取用户信息的API端点
 
+/**
+ * 从 sessionStorage 中安全地读取和解析用户信息。
+ * @returns {Object|null} 用户信息对象或null。
+ */
+export const getStoredUser = () => {
+    const storedUser = sessionStorage.getItem('currentUser');
+    if (storedUser) {
+        try {
+            return JSON.parse(storedUser);
+        } catch (e) {
+            console.error('Error parsing stored user info:', e);
+            return null;
+        }
+    }
+    return null;
+};
+
 /**
  * 检查Token是否存在且（理论上）是否在有效期内。
  * 服务端 /user接口会验证实际有效期。
@@ -22,24 +39,18 @@ export const hasValidToken = () => {
  */
 export const getUserInfo = async () => {
     if (!hasValidToken()) {
-        console.log(' No token found, skipping getUserInfo.');
-        return null;
+        throw new Error('No valid token found');
     }
     try {
-        // console.log('jwt.js: Attempting to fetch user info from', USER_INFO_URL);
         const response = await axiosInstance.get(USER_INFO_URL);
-        if (response.status !== 200) {
-            router.push('/backend/login');
-            return null;
-        }
-        // console.log('jwt.js: User info received:', response.data);
-        return response.data; 
+        const user = response.data;
+        // 将获取到的用户信息存入 sessionStorage
+        sessionStorage.setItem('currentUser', JSON.stringify(user));
+        return user;
     } catch (error) {
-        router.push('/backend/login');
-        // console.error('jwt.js: Error fetching user info:', error.response ? error.response.status : error.message);
-        // 401错误会被响应拦截器处理（清除token），然后错误会传播到这里
-        // 其他网络错误等也会被捕获
-        return null;
+        // 清除可能存在的无效用户信息
+        sessionStorage.removeItem('currentUser');
+        throw error;
     }
 };
 
@@ -51,6 +62,7 @@ export const logoutUser = () => { // 不再是 async，因为它不执行异步
     // console.log('jwt.js: logoutUser called. Clearing local storage.');
     localStorage.removeItem('access_token');
     localStorage.removeItem('user_id');
+    sessionStorage.removeItem('currentUser'); // 同时清除sessionStorage中的用户信息
     // 导航将由调用者（如路由守卫）处理
 };