大屏项目初始化

2026-03-01 23:21:08 +08:00
parent 0a95924d34
commit 86c1e58644
2 changed files with 64 additions and 46 deletions
--- a/screen-vue/src/utils/request.js
+++ b/screen-vue/src/utils/request.js
@@ -2,7 +2,6 @@ import axios from 'axios'
 import { ElMessage } from 'element-plus'
 import router from '@/router'

-// 创建axios实例
 const service = axios.create({
  baseURL: import.meta.env.PROD ? '' : '/api',
  timeout: 10000,
@@ -11,62 +10,44 @@ const service = axios.create({
  }
 })

-// 无需token的白名单接口
 const WHITE_LIST_PATHS = ['/userLogin', '/register'];

-/**
- * 检查路径是否在白名单中
- * @param {string} url 请求路径
- * @returns {boolean} 是否在白名单
- */
-const isInWhiteList = (url) => {
-  if (!url) return false;
-  return WHITE_LIST_PATHS.some(path => url.includes(path));
-};
-
-/**
- * 处理登录失效/无token逻辑
- */
-const handleLoginExpired = () => {
-  // 清除无效token
-  localStorage.removeItem('token');
-  
-  if (router.currentRoute.path !== '/login') {
-    const redirect = encodeURIComponent(router.currentRoute.fullPath);
-    router.push({ 
-      path: '/login',
-      query: { redirect }
-    }).catch(err => {
-      console.warn('路由跳转登录页失败', err);
-    });
-    ElMessage.error('登录状态已失效，请重新登录');
+const checkTokenExist = (config) => {
+  if (WHITE_LIST_PATHS.some(path => config.url?.includes(path))) {
+    return true;
  }
+  // 非白名单接口检查token
+  const token = localStorage.getItem('token');
+  if (!token) {
+    handleLoginExpired();
+    return false;
+  }
+  config.headers.Authorization = `Bearer ${token}`;
+  return true;
 };

-// 请求拦截器
 service.interceptors.request.use(
  (config) => {
-    if (isInWhiteList(config.url)) {
-      return config;
-    }
-    const token = localStorage.getItem('token');
-    if (!token) {
-      handleLoginExpired();
+    if (!checkTokenExist(config)) {
      return Promise.reject(new Error('未检测到登录凭证，请先登录'));
    }
-    config.headers.Authorization = `Bearer ${token}`;
-    return config;
+    return config
  },
  (error) => {
    console.error('【请求拦截器错误】', error);
-    return Promise.reject(error);
+    return Promise.reject(error)
  }
-);
+)

-// 响应拦截器
 service.interceptors.response.use(
  (response) => {
    const res = response.data;
+    
+    if (typeof res === 'string' && res.includes('<html>')) {
+      handleLoginExpired();
+      return Promise.reject(new Error('登录状态已失效，请重新登录'));
+    }
+    
    if (res.code !== 200) {
      ElMessage.error(res.msg || '接口请求失败');
      if (res.code === 401) {
@@ -77,6 +58,11 @@ service.interceptors.response.use(
    return res.data;
  },
  (error) => {
+    if (isLoginExpiredError(error)) {
+      handleLoginExpired();
+      return Promise.reject(new Error('登录状态已失效，请重新登录'));
+    }
+    
    if (!error.response) {
      const errMsg = error.message.toLowerCase();
      if (errMsg.includes('network error') || errMsg.includes('timeout')) {
@@ -86,16 +72,48 @@ service.interceptors.response.use(
      }
      return Promise.reject(error);
    }
-
-    if (error.response.status === 401) {
+    
+    const responseData = error.response.data;
+    if (typeof responseData === 'string' && responseData.includes('<html>')) {
      handleLoginExpired();
      return Promise.reject(new Error('登录状态已失效，请重新登录'));
    }
-
-    // 其他错误提示
+    
    ElMessage.error(error.response.data?.msg || error.message || '接口请求失败');
    return Promise.reject(error);
  }
-);
+)
+
+function isLoginExpiredError(error) {
+  if (error.response && error.response.status === 401) {
+    return true;
+  }
+  
+  const errorMsg = (error.message || '').toLowerCase();
+  const expiredKeywords = [
+    'token expired', 'invalid token', '未授权', 
+    '登录失效', '认证失败', '401'
+  ];
+  const networkKeywords = ['network error', 'timeout', '网络'];
+  
+  return (
+    expiredKeywords.some(keyword => errorMsg.includes(keyword)) &&
+    !networkKeywords.some(keyword => errorMsg.includes(keyword))
+  );
+}
+
+function handleLoginExpired() {
+  localStorage.removeItem('token');
+  if (router.currentRoute.path !== '/login') {
+    const redirect = encodeURIComponent(router.currentRoute.fullPath);
+    router.push({
+      path: '/login',
+      query: { redirect }
+    }).catch(err => {
+      console.warn('路由跳转失败', err);
+    });
+    ElMessage.error('登录状态已失效，请重新登录');
+  }
+}

 export default service;