大屏页面初始化

2026-03-02 13:57:22 +08:00
parent d609cc45f0
commit 1de57f2089
14 changed files with 227 additions and 96 deletions
--- a/screen-vue/src/components/Layout/index.vue
+++ b/screen-vue/src/components/Layout/index.vue
@@ -200,7 +200,7 @@ const getMenuList = async () => {
    }
    setMenuNameMap(menuList.value);
  } catch (error) {
-    ElMessage.error(error);
+	  console.log(error);
  }
 }

--- a/screen-vue/src/router/index.js
+++ b/screen-vue/src/router/index.js
@@ -5,7 +5,6 @@ import Layout from '@/components/Layout/index.vue'
 import Dashboard from '@/views/desktop/index.vue'
 import bigScreen from '@/views/screen/index.vue'

-// 扫描规则保持不变
 const modules = import.meta.glob('../views/**/index.vue', { 
  eager: false,
  import: 'default'
@@ -47,16 +46,16 @@ const generateRoutes = () => {
 }

 const routes = [
-  {
-    path: '/',
-    redirect: '/login'
-  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { isPublic: true }
  },
+  {
+    path: '/',
+    redirect: '/login'
+  },
  {
    path: '/bigScreen',
    name: 'bigScreen',
@@ -64,12 +63,12 @@ const routes = [
    meta: { requiresAuth: true }
  },
  {
-    path: '/',
+    path: '/layout',
    component: Layout,
    meta: { requiresAuth: true },
    children: [
      {
-        path: 'dashboard',
+        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard
      },
@@ -91,21 +90,30 @@ const router = createRouter({
  }
 })

+// 优化路由守卫逻辑：更健壮的登录校验
 router.beforeEach((to, from, next) => {
+  // 公开页面直接放行
  if (to.meta.isPublic) {
    next()
    return
  }

+  // 非公开页面校验token
  try {
    const token = localStorage.getItem('token')
-    if (token && token.trim() !== '') {
-      next();
+    // 严格校验token有效性
+    if (token && typeof token === 'string' && token.trim() !== '') {
+      next()
    } else {
-      next({ path: '/login', query: { redirect: to.fullPath } });
+      next({ 
+        path: '/login', 
+        query: { redirect: to.fullPath },
+        replace: true // 替换历史记录，避免回退问题
+      })
    }
  } catch (error) {
-    next('/login');
+    console.error('路由守卫校验token失败：', error)
+    next({ path: '/login', replace: true })
  }
 })

--- a/screen-vue/src/utils/request.js
+++ b/screen-vue/src/utils/request.js
@@ -10,71 +10,80 @@ const service = axios.create({
  }
 })

-const WHITE_LIST = ['/userLogin', '/register']
+const WHITE_LIST = ['userLogin', 'register']

 service.interceptors.request.use(
  (config) => {
-    const isWhite = WHITE_LIST.some(item => config.url?.includes(item))
+    const requestUrl = config.url || '';
+    const isWhite = WHITE_LIST.some(item => requestUrl.includes(item));
+    
    if (isWhite) {
-      return config
+      return config;
    }

-    const token = localStorage.getItem('token')
+    const token = localStorage.getItem('token');
    if (!token) {
-      handleLoginExpired()
-      return Promise.reject()
+      handleLoginExpired();
+      return Promise.reject({ config, message: '未获取到token' });
    }

-    config.headers.Authorization = `Bearer ${token}`
-    return config
+    config.headers.Authorization = `Bearer ${token}`;
+    return config;
  },
  (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()
-    }
-
+    const res = response.data;
+    
+    // 1. 处理登录失效
    if (res.code === 401) {
-      handleLoginExpired()
-      return Promise.reject()
+      handleLoginExpired();
+      return Promise.reject(res);
    }

-    if (res.code !== 200) {
-      ElMessage.error(res.msg || '请求失败')
-      return Promise.reject(res)
+    // 2. 处理业务成功
+    if (res.code === 200) {
+      return res.data;
    }

-    return res.data
+    // 3. 处理其他业务错误（如500）
+    ElMessage.error(res.msg || '请求失败');
+    return Promise.reject(res);
  },
  (error) => {
-    const isWhite = error.config && WHITE_LIST.some(item => error.config.url?.includes(item))
+    const requestUrl = error?.config?.url || '';
+    const isWhite = WHITE_LIST.some(item => requestUrl.includes(item));
+    
    if (isWhite) {
-      ElMessage.error('服务异常')
-      return Promise.reject(error)
+      const errMsg = error?.response?.data?.msg || '登录请求失败，请检查网络或账号信息';
+      ElMessage.error(errMsg);
+      return Promise.reject(error);
    }
-    if (error.response?.status === 401) {
-      handleLoginExpired()
-      return Promise.reject(error)
+
+    if (error?.response?.status === 401) {
+      handleLoginExpired();
+      return Promise.reject(error);
    }
-    ElMessage.error('请求异常，请稍后重试')
-    return Promise.reject(error)
+
+    if (!error.response) {
+      ElMessage.error('网络异常，请检查网络连接后重试');
+      return Promise.reject(error);
+    }
+
+    return Promise.reject(error);
  }
 )

 function handleLoginExpired() {
-  localStorage.removeItem('token')
+  localStorage.removeItem('token');
  if (router.currentRoute.path !== '/login') {
-    router.push('/login').catch(() => {})
-    ElMessage.error('登录已失效，请重新登录')
+    router.push('/login').catch(() => {});
+    ElMessage.error('登录已失效，请重新登录');
  }
 }

-export default service
+export default service;
--- a/screen-vue/src/views/screen/Home/index.vue
+++ b/screen-vue/src/views/screen/Home/index.vue
@@ -78,16 +78,6 @@ const switchMenu = (id) => {
  console.log(`切换到菜单：${menuList.value.find(item => item.id === id)?.name}`);
 };

-watch(
-  () => props.formParams,
-  (newVal) => {
-    console.log('表单参数更新：', newVal);
-  },
-  { 
-    deep: true,
-    immediate: true
-  }
-);
 </script>

 <style scoped>