Route Guard Configuration

VTS provides flexible routing management and permission control mechanisms based on Vue Router, ensuring the security and maintainability of the application.

1. Routes

Route Configuration

All sub-routes are configured in the child-routes.ts file, supporting nested routes, dynamic routes, and on-demand loading.

const importModule = import.meta.glob('../modules/**/*.vue')

const childRoutes: Array<RouteRecordRaw> = [
  {
    path: 'test-layout',
    name: '布局测试',
    meta: {
      title: 'TestLayout'
    },
    component: LayoutArea
  },
  {
    path: 'user',
    component: Layout,
    name: 'User',
    meta: {
      title: '账户'
    },
    redirect: {
      name: 'UserLogin'
    },
    children: [
      {
        path: 'login',
        name: 'UserLogin',
        component: importModule['../modules/UserAccount/pages/login.vue'],
        meta: {
          title: '登录'
        }
      }
    ]
  },
  {
    path: 'project',
    component: Layout,
    name: 'Project',
    redirect: {
      name: 'ProjectList'
    },
    children: [
      {
        path: '',
        name: 'ProjectList',
        meta: {
          title: '项目列表'
        },
        component: importModule['../modules/Project/pages/list.vue']
      },
      {
        path: 'list',
        name: 'ProjectList',
        component: importModule['../modules/Project/pages/list.vue'],
        meta: {
          title: '项目管理'
        }
      }
    ]
  },
  {
    path: 'result',
    redirect: {
      name: 'ProjectList'
    }
  },
  {
    path: 'result/:projectId',
    component: LayoutView,
    name: 'result',
    redirect: {
      name: 'ResultOverview'
    },
    children: [
      {
        path: 'overview',
        name: 'ResultOverview',
        component: importModule['../modules/Result/pages/overview.vue'],
        meta: {
          title: '总览'
        }
      }
    ]
  }
]

export default childRoutes

Route Features

• Nested Routes：Supports flexible nesting, making it easier to organize complex pages。
• Lazy Loading：Implements on-demand loading using import.meta.glob to improve performance.
• Dynamic Routes：Supports parameterized routes, with dynamic matching like /result/:projectId.

2. Authorization

Route permission control is implemented in permission.ts, ensuring users can only access authorized pages.

Create Router Guards

export function createRouterGuards(router: Router) {
  router.beforeEach(async (to, from, next) => {
    NProgress.start()

    document.title = `${ to.meta.title || '' } - ${ systemTitle }`

    const currentRouteLocale = to.params.locale

    if (
      allowlist.find(
        name => to.name === name
      )
    ) {
      next()
      return
    }

    if (!Cookie.get('token')) {
      next(`/${ currentRouteLocale || store.state.UserAccount.locale }/user/login`)
      return
    }

    // Get user info
    const { data, error } = await store.dispatch('UserAccount/getUserInfo')

    if (error) {
      store.dispatch('UserAccount/setLanguage', {
        locale: currentRouteLocale || data.language || store.state.UserAccount.locale
      })
      Cookie.remove('token')
      next(`/${ currentRouteLocale || store.state.UserAccount.locale }/user/login`)
      return
    }

    store.dispatch('UserAccount/setLanguage', {
      locale: currentRouteLocale || data.language
    })
    next()
  })

  router.afterEach((to) => {
    NProgress.done()
  })
}

Authorization Mechanism

• Whitelist Mechanism: The allowlist allows certain pages to be accessed without login.
• Token Verification: If the token does not exist, the user will be redirected to the login page.
• User Information Retrieval: Retrieves user information from the store to decide whether to grant access.
• Progress Bar for Enhanced Experience: Uses NProgress to indicate the page transition status.