前端：完善无感刷新

后端：修复刷新token接口异常报错

backend/IM_API/Services/RedisRefreshTokenService.cs

@@ -53,8 +53,8 @@ namespace IM_API.Services
             if (json.IsNullOrEmpty) return (false,-1);
             try
             {
-                var doc = JsonConvert.DeserializeObject<JsonElement>(json);
-                var userId = doc.GetProperty("UserId").GetInt32();
+                using var doc = JsonDocument.Parse(json.ToString());
+                var userId = doc.RootElement.GetProperty("UserId").GetInt32();
                 return (true,userId);
             }
             catch

frontend/web/src/services/api.js

@@ -2,10 +2,15 @@ import axios from 'axios'
 import { useMessage } from '@/components/messages/useAlert';
 import router from '@/router';
 import { useAuthStore } from '@/stores/auth';
+import { authService } from './auth';
 
 const message = useMessage();
 const authStore = useAuthStore();
 
+let waitqueue = [];
+let isRefreshing = false;
+const authURL = ['/auth/login', '/auth/register', '/auth/refresh'];
+
 const api = axios.create({
     baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api', // 从环境变量中读取基础 URL
     timeout: 10000,
@@ -31,16 +36,50 @@ api.interceptors.response.use(
     response => {
         return response.data;
     },
-    err => {
-        if (err.response) {
-            switch (err.response.status) {
+    async err => {
+        const { config, response } = err;
+        if (response) {
+            switch (response.status) {
                 case 401:
+                    if (authURL.some(x => config.url.includes(x))) {
+                        authStore.logout();
+                        message.error('未登录，请登录后操作。');
+                        router.push('/auth/login')
+                        break;
+                    }
+                    if (config._retry) {
+                        break;
+                    }
+
+                    config._retry = true;
+                    // 已经在刷新 → 排队
+                    if (isRefreshing) {
+                        return new Promise(resolve => {
+                            waitqueue.push(token => {
+                                config.headers.Authorization = `Bearer ${token}`
+                                resolve(api(config))
+                            })
+                        })
+                    }
+
+                    isRefreshing = true;
+                    const refreshToken = authStore.refreshToken;
+                    console.log(authStore)
+                    if (refreshToken != null && refreshToken != '') {
+                        const res = await authService.refresh(refreshToken)
+                        authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo)
+                        waitqueue.forEach(cb => cb(authStore.token));
+                        waitqueue = [];
+                        config.headers.Authorization = `Bearer ${authStore.token}`
+                        return api(config)
+                    }
+                    authStore.logout();
                     message.error('未登录，请登录后操作。');
                     router.push('/auth/login')
                     break;
                 case 400:
-                    if (err.response.data && err.response.data.code == 1003) {
-                        message.error(err.response.data.message);
+                    if (response.data && response.data.code == 1003) {
+                        message.error(response.data.message);
                         break;
                     }
                 default:

frontend/web/src/stores/auth.js

@@ -4,10 +4,10 @@ import { defineStore } from 'pinia'
 export const useAuthStore = defineStore('auth', () => {
   const token = ref(localStorage.getItem('user_token') || '');
   const refreshToken = ref(localStorage.getItem('refresh_token') || '');
-  const userInfo = ref(localStorage.getItem('user_info') || '');
+  const userInfo = ref(JSON.parse(localStorage.getItem('user_info')) || {});
 
   //判断是否已登录
-  const isLoggedIn = computed(() => !!token.value);
+  const isLoggedIn = computed(() => !!refreshToken.value);
 
   /**
    * 登录成功保存状态
@@ -15,12 +15,13 @@ export const useAuthStore = defineStore('auth', () => {
    * @param {*} user      用户信息
    */
   function setLoginInfo(newToken, newRefreshToken, user) {
+    console.log(`设置凭证：\ntoken：${newToken}\nrefreshToken:${newRefreshToken}`)
     token.value = newToken;
     refreshToken.value = newRefreshToken
     userInfo.value = user;
     localStorage.setItem('user_token', newToken);
-    localStorage.setItem('refresh_token', refreshToken)
-    localStorage.setItem('user_info', user)
+    localStorage.setItem('refresh_token', newRefreshToken)
+    localStorage.setItem('user_info', JSON.stringify(user))
   }
 
   /**
@@ -29,10 +30,11 @@ export const useAuthStore = defineStore('auth', () => {
   function logout() {
     token.value = '';
     userInfo.value = null;
+    refreshToken.value = ''
     localStorage.removeItem('user_token');
     localStorage.removeItem('refresh_token')
     localStorage.removeItem('user_info')
   }
 
-  return { token, userInfo, isLoggedIn, setLoginInfo, logout };
+  return { token, refreshToken, userInfo, isLoggedIn, setLoginInfo, logout };
 })