k_online_ui/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { useBreadCrumb } from '@/stores/modules/breadCrumb'

const router = createRouter({
  history: createWebHistory(`${import.meta.env.VITE_BASE_URL}`),
  routes: [
    {
      path: '/',
      name: 'Home',
      redirect: '/dashboard',
      component: () => import('../views/Layout'),
      children: [
        {
          path: '/dashboard',
          name: 'Dashboard',
          component: () => import('../views/Dashboard')
        },
        {
          path: '/booking',
          name: 'Booking',
          component: () => import('../views/Booking')
        },
        {
          path: '/booking/detail',
          name: 'Booking Detail',
          component: () => import('../views/Booking/src/components/BookingDetail'),
          meta: {
            activeMenu: '/booking'
          }
        },
        {
          path: '/tracking',
          name: 'Tracking',
          component: () => import('../views/Tracking')
        },
        {
          path: '/tracking/detail',
          name: 'Tracking Detail',
          component: () => import('../views/Tracking/src/components/TrackingDetail'),
          meta: {
            activeMenu: '/tracking'
          }
        },
        {
          path: '/tracking/add-vgm',
          name: 'Add VGM',
          component: () =>
            import('../views/Tracking/src/components/TrackingTable/src/components/VGMView.vue'),
          meta: {
            activeMenu: '/tracking'
          }
        },
        {
          path: '/public-tracking',
          name: 'Public Tracking',
          component: () => import('../views/Tracking/src/components/PublicTracking'),
          meta: {
            activeMenu: '/tracking'
          }
        },
        {
          path: '/public-tracking/detail',
          name: 'Public Tracking Detail',
          component: () =>
            import(
              '../views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue'
            ),
          meta: {
            activeMenu: '/tracking'
          }
        },
        {
          path: '/login',
          name: 'Login',
          component: () => import('../views/Login'),
          meta: {
            activeMenu: '/tracking'
          }
        },
        {
          path: '/reset-password',
          name: 'Reset Password',
          component: () => import('../views/Login/src/components/ChangePasswordCard.vue')
        },
        {
          path: '/Operationlog',
          name: 'Operationlog',
          component: () => import('../views/OperationLog')
        },
        {
          path: '/system-message',
          name: 'System Message',
          component: () => import('../views/SystemMessage')
        },
        {
          path: '/system-message-detail',
          name: 'System Message Detail',
          meta: {
            breadName: 'Detail'
          },
          component: () => import('../views/SystemMessage/src/components/SystemMessageDetail.vue')
        },
        {
          path: '/SystemSettings',
          name: 'Monitoring Settings',
          component: () => import('../views/SystemSettings')
        },
        {
          path: '/SystemSettings/createnewrule',
          name: 'Create New Rule',
          component: () => import('../views/SystemSettings/src/components/CreateNewrule'),
          meta: {
            activeMenu: '/SystemSettings'
          }
        }
      ]
    }
  ]
})

// * 路由拦截 beforeEach
router.beforeEach(async (to, from, next) => {
  useBreadCrumb().setRouteList(to)
  const userStore = useUserStore()
  // 如果手动跳转登录页，清除登录信息
  if (to.path === '/login') {
    if (userStore.userInfo?.uname) {
      await userStore.logout()
    }
    sessionStorage.removeItem('trackingTablePageInfo')
    sessionStorage.removeItem('bookingTablePageInfo')
  }

  // 未登录白名单
  const whiteList = ['/login', '/public-tracking', '/public-tracking/detail', '/reset-password']
  // 判断是否登录
  if (!whiteList.includes(to.path) && !userStore.userInfo?.uname) {
    const userStore = useUserStore()
    await userStore.logout()
    if (whiteList.includes(from.path)) {
      ElMessage.warning({
        message: 'Please log in to use this feature.',
        grouping: true
      })
      next(false)
      return
    } else {
      next('/login')
    }
  }
  next()
})

export default router