seecoder-devcloud-frontend/src/router/index.ts

import { isUserLoggedIn } from '@/utils/user';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { HOME, LOGIN, PROJECT } from './name';

const AuthWrapper = (routeRecord: RouteRecordRaw) => {
  const meta = routeRecord.meta || {};
  meta.requiresAuth = true;
  return {
    ...routeRecord,
    meta,
  };
};

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: HOME,
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/login',
    name: LOGIN,
    component: () => import(/* webpackChunkName: "login" */ '@/views/Login.vue'),
    meta: {
      hideNavigator: true,
    },
  },
  AuthWrapper({
    path: '/project/:projectId',
    name: PROJECT,
    component: () => import(/* webpackChunkName: "project" */ '@/views/ProjectContainer.vue'),
    children: [
      {
        path: 'schedule',
        component: () => import(/* webpackChunkName: "project" */'@/views/Project/Schedule.vue'),
      },
      {
        path: 'taskList',
        component: () => import(/* webpackChunkName: "project" */'@/views/Project/TaskList.vue'),
      },
      {
        path: 'bugList',
        component: () => import(/* webpackChunkName: "project" */'@/views/Project/BugList.vue'),
      },
      {
        path: 'statistics',
        component: () => import(/* webpackChunkName: "project" */'@/views/Project/Statistics.vue'),
      },
      {
        path: 'pipeline',
        component: () => import(/* webpackChunkName: "project" */'@/views/Project/Pipeline.vue'),
      },
      {
        path: 'apitest',
        component: () => import(/* webpackChunkName: "project" */'@/views/Project/APITest.vue'),
      },
      {
        path: 'invite',
        component: () => import(/* webpackChunkName: "project" */'@/views/Project/Invite.vue'),
      },
    ],
  }),
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!isUserLoggedIn()) {
      next({
        name: LOGIN,
        query: { redirect: to.fullPath },
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

router.beforeEach((to, from, next) => {
  if (to.name !== LOGIN || !isUserLoggedIn()) {
    next();
  }
});

router.afterEach((to, from) => {
  if (to.matched.some((record) => record.meta.hideNavigator)) {
    document.getElementsByTagName('header')[0]!.style.display = 'none';
  } else {
    document.getElementsByTagName('header')[0]!.style.display = 'flex';
  }
});

export default router;