k_online_ui/src/router/index.ts

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

const router = createRouter({
  history: createWebHistory(`/new/`),
  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')
        }
      ]
    }
  ]
})

// * 路由拦截 beforeEach
router.beforeEach(async (to, from, next) => {
  // 未登录白名单
  const whiteList = ['/login', '/public-tracking', '/public-tracking/detail', '/reset-password']
  // 判断是否登录
  if (!whiteList.includes(to.path) && !localStorage.getItem('username')) {
    const userStore = useUserStore()
    userStore.clearUsername()
    if (whiteList.includes(from.path)) {
      ElMessage.warning('Please log in to use this feature.')
      next(false)
      return
    } else {
      next('/public-tracking')
    }
  }
  if (to.path === '/Login') {
    const userStore = useUserStore()
    userStore.clearUsername()
  }
  next()
})

export default router