添加无感刷新

src/utils/request2.ts

@@ -6,35 +6,120 @@ const baseURL = "https://pm.ljsea.top/";
 //const baseURL= "http://localhost:8084";
 //const baseURL="https://pm.ljsea.top";
 //const baseURL = "https://gep.ljsea.xyz/";
+
+let isRefreshing = false;
+let requests = [];
+
 const request = axios.create({
   baseURL: baseURL,
 });
 
-request.interceptors.response.use(
+// 请求拦截器 - 添加token
-    result => {
+request.interceptors.request.use();
-        if(result.status!==200 ){
-            router.push("/login")
-        }
-        if(result.data.message==="NOT_LOGIN"|| [2, 3, 4].includes(result.data.code)){
-            //alert("登录失效，请重新登录！")
-            ElMessage.error('登录失效，请重新登录！');
-            localStorage.removeItem("token");
-            router.push("/login")
-            return
-        }
 
-        if(result.data.code == 1){
+// 响应拦截器
-            //alert("请求失败，请稍后重试！");
+request.interceptors.response.use(
-            ElMessage.error('请求失败，请稍后重试！');
+  result => {
-        }else{
+    if(result.status !== 200) {
-            return result.data
+      router.push("/login");
-        }
-    },
-    error => {
-        //alert("请求失败，请稍后重试！");
-        ElMessage.error('请求失败，请稍后重试！');
-      return Promise.reject(error);
     }
-)
+
+    if(result.data.message === "NOT_LOGIN" || [2, 3, 4].includes(result.data.code)) {
+      // 检测到token过期
+      if (isRefreshing == false) {
+        isRefreshing = true;
+        
+        // 这里需要替换为实际的refresh token请求
+        return axios.post('https://uc.ljsea.top/user/refresh_token', {
+          refresh_token: localStorage.getItem("refresh_token")
+        },{
+          headers: {
+            'Authorization': `Bearer ${localStorage.getItem("refresh_token")}`
+          }
+        }).then(res => {
+          const token = res.data["data"]["access_token"];
+          localStorage.setItem("token", token);
+          
+          // 重试所有挂起的请求
+          requests.forEach(cb => cb(token));
+          requests = [];
+          isRefreshing = false;
+          
+          // 重试当前请求
+          const config = result.config;
+          config.headers.Authorization = `Bearer ${token}`;
+          return request(config);
+        }).catch(err => {
+          // 刷新token失败，跳转登录
+          ElMessage.error('登录已过期，请重新登录！12');
+          router.push("/login");
+          return Promise.reject(err);
+        });
+      } else if (isRefreshing) {
+        // 正在刷新token，将请求放入队列
+        return new Promise(resolve => {
+          requests.push(token => {
+            result.config.headers.Authorization = `Bearer ${token}`;
+            resolve(request(result.config));
+          });
+        });
+      } 
+    }
+
+    if(result.data.code == 7) {
+      ElMessage.error('该用户已存在，请重新输入！');
+      return null;
+    }
+
+    if(result.data.code == 1) {
+      ElMessage.error('请求失败，请稍后重试！');
+    } else {
+      return result.data;
+    }
+  },
+  error => {
+    if (error.response && error.response.status === 401 && !isRefreshing) {
+      // 处理401未授权错误
+      const originalRequest = error.config;
+      if (!isRefreshing) {
+        isRefreshing = true;
+        
+        return axios.post(baseURL+'user/refresh', {
+          refresh_token: localStorage.getItem("refresh_token")
+        },{
+          headers: {
+            'Authorization': `Bearer ${localStorage.getItem("refresh_token")}`
+          }
+        }).then(res => {
+          const { token, refresh_token } = res.data;
+          localStorage.setItem("token", token);
+          localStorage.setItem("refresh_token", refresh_token);
+          
+          requests.forEach(cb => cb(token));
+          requests = [];
+          isRefreshing = false;
+          
+          originalRequest.headers.Authorization = `Bearer ${token}`;
+          return request(originalRequest);
+        }).catch(err => {
+          ElMessage.error('登录已过期，请重新登录！');
+          localStorage.removeItem("token");
+          localStorage.removeItem("refresh_token");
+          router.push("/login");
+          return Promise.reject(err);
+        });
+      } else {
+        return new Promise(resolve => {
+          requests.push(token => {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+            resolve(request(originalRequest));
+          });
+        });
+      }
+    }
+    ElMessage.error('请求失败，请稍后重试！');
+    return Promise.reject(error);
+  }
+);
 
 export default request;

src/utils/user_center_request.ts

@@ -7,70 +7,120 @@ const baseURL = "https://uc.ljsea.top/";
 //const baseURL= "http://localhost:8084";
 //const baseURL="https://pm.ljsea.top";
 //const baseURL = "https://gep.ljsea.xyz/";
+
+let isRefreshing = false;
+let requests = [];
+
 const request = axios.create({
   baseURL: baseURL,
 });
 
+// 请求拦截器 - 添加token
+request.interceptors.request.use();
+
+// 响应拦截器
 request.interceptors.response.use(
-    result => {
+  result => {
-        const cookie= Cookies.get("user_token");
+    if(result.status !== 200) {
-        console.log("cookie:", cookie);
+      router.push("/login");
+    }
+
+    if(result.data.message === "NOT_LOGIN" || [2, 3, 4].includes(result.data.code)) {
+      // 检测到token过期
+      if (isRefreshing == false) {
+        isRefreshing = true;
         
-        //请求地址
+        // 这里需要替换为实际的refresh token请求
-        if(result.config.url == "/user/refresh_token"){
+        return axios.post('https://uc.ljsea.top/user/refresh_token', {
-            return result;
+          refresh_token: localStorage.getItem("refresh_token")
-        }
+        },{
-
+          headers: {
-        if(result.data.message==="NOT_LOGIN"|| [2, 3, 4].includes(result.data.code) || result.status !== 200 ){
+            'Authorization': `Bearer ${localStorage.getItem("refresh_token")}`
-            //alert("登录失效，请重新登录！")
+          }
-            refreshToken();
+        }).then(res => {
-            //重新请求
+          const token = res.data["data"]["access_token"];
-            //return request(result.config);
+          localStorage.setItem("token", token);
-        }
+          
-        if(result.data.code == 7){
+          // 重试所有挂起的请求
-            //alert("该用户已存在，请重新输入！");
+          requests.forEach(cb => cb(token));
-            ElMessage.error('该用户已存在，请重新输入！');
+          requests = [];
-            return null
+          isRefreshing = false;
-        }
+          
-
+          // 重试当前请求
-        if(result.data.code == 1){
+          const config = result.config;
-            //alert("请求失败，请稍后重试！");
+          config.headers.Authorization = `Bearer ${token}`;
-            ElMessage.error('请求失败，请稍后重试！');
+          return request(config);
-        }else{
+        }).catch(err => {
-            return result.data
+          // 刷新token失败，跳转登录
-        }
+          ElMessage.error('登录已过期，请重新登录！12');
-    },
+          router.push("/login");
-    error => {
+          return Promise.reject(err);
-        //alert("请求失败，请稍后重试！");
+        });
-        ElMessage.error('请求失败，请稍后重试！');
+      } else if (isRefreshing) {
-      return Promise.reject(error);
+        // 正在刷新token，将请求放入队列
+        return new Promise(resolve => {
+          requests.push(token => {
+            result.config.headers.Authorization = `Bearer ${token}`;
+            resolve(request(result.config));
+          });
+        });
+      } 
     }
-)
 
-const refreshToken = async  () => {
+    if(result.data.code == 7) {
-    //读取cookie的信息
+      ElMessage.error('该用户已存在，请重新输入！');
-    const user_token = Cookies.get("user_token");
+      return null;
-    if(user_token == null){
-        router.push("/login");
     }
-    let userTokenInfo = JSON.parse(user_token);
+
-    let req_data = await request.post('/user/refresh_token', {
+    if(result.data.code == 1) {
-        "refresh_token": userTokenInfo.refresh_token
+      ElMessage.error('请求失败，请稍后重试！');
-    }, {
+    } else {
-        headers: {
+      return result.data;
-            'token': userTokenInfo.token,
-            'Content-Type': 'application/json' // 设置请求头为 JSON 格式
-        }
-    });
-    if(req_data.status == 401 || req_data.status == 403){
-        //alert("登录失效，请重新登录！");
-        ElMessage.error('登录失效，请重新登录！');
-        localStorage.removeItem("token");
-        router.push("/login")
-    }else{
-        let newAccessToken = req_data.data;
-        localStorage.setItem("token", newAccessToken);
     }
-}
+  },
+  error => {
+    if (error.response && error.response.status === 401 && !isRefreshing) {
+      // 处理401未授权错误
+      const originalRequest = error.config;
+      if (!isRefreshing) {
+        isRefreshing = true;
+        
+        return axios.post(baseURL+'user/refresh', {
+          refresh_token: localStorage.getItem("refresh_token")
+        },{
+          headers: {
+            'Authorization': `Bearer ${localStorage.getItem("refresh_token")}`
+          }
+        }).then(res => {
+          const { token, refresh_token } = res.data;
+          localStorage.setItem("token", token);
+          localStorage.setItem("refresh_token", refresh_token);
+          
+          requests.forEach(cb => cb(token));
+          requests = [];
+          isRefreshing = false;
+          
+          originalRequest.headers.Authorization = `Bearer ${token}`;
+          return request(originalRequest);
+        }).catch(err => {
+          ElMessage.error('登录已过期，请重新登录！');
+          localStorage.removeItem("token");
+          localStorage.removeItem("refresh_token");
+          router.push("/login");
+          return Promise.reject(err);
+        });
+      } else {
+        return new Promise(resolve => {
+          requests.push(token => {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+            resolve(request(originalRequest));
+          });
+        });
+      }
+    }
+    ElMessage.error('请求失败，请稍后重试！');
+    return Promise.reject(error);
+  }
+);
 
 export default request;