frontend-admin/src/router/index.js

import { getToken } from "@/auth/auth";
import { isNil } from "lodash-es";
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home/Home.vue";
import Layout from "@/views/Layout/Layout.vue";

import invigilation from "./invigilation";

// ignore NavigationDuplicated. https://github.com/vuejs/vue-router/issues/2881
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject);
  try {
    return originalPush.call(this, location).catch((err) => err);
  } catch (error) {
    console.log(error);
  }
};
// end ignore

Vue.use(VueRouter);

// function propsValidator(route, component) {
//   const props = { ...route.params };
//   Object.entries(props).map(([key, prop]) => {
//     console.log(prop, key);
//     if (!(prop instanceof component.props[key].type)) {
//       props[key] = component.props[key].type(prop);
//     }
//   });
//   return props;
// }

const routes = [
  {
    path: "/home",
    component: Layout,
    children: [
      {
        path: "",
        name: "Home",
        component: Home,
      },
      ...invigilation,
    ],
  },
  {
    path: "/system",
    name: "System",
    component: Layout,
    children: [
      {
        path: "user",
        name: "UserManagement",
        component: () =>
          import(
            /* webpackChunkName: "system" */ "../features/system/UserManagement/UserManagement.vue"
          ),
      },
      {
        path: "org",
        name: "OrgManagement",
        component: () =>
          import(
            /* webpackChunkName: "system" */ "../features/system/OrgManagement/OrgManagement.vue"
          ),
      },
    ],
  },
  {
    path: "/exam",
    name: "Exam",
    component: Layout,
    children: [
      {
        path: "list",
        name: "ExamManagement",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/ExamManagement/ExamManagement.vue"
          ),
      },
      {
        path: "edit/:id?",
        name: "ExamEdit",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/ExamManagement/ExamEdit.vue"
          ),
        meta: {
          relate: "ExamManagement",
        },
      },
      {
        path: ":examId/activity",
        name: "ActivityManagement",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/ActivityManagement/ActivityManagement.vue"
          ),
      },
      {
        path: ":examId/activity/new",
        name: "ActivityEdit",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/ActivityManagement/ActivityEdit.vue"
          ),
        meta: {
          relate: "ActivityManagement",
        },
      },
      {
        path: "examstudent",
        name: "ExamStudentManagement",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/ExamStudentManagement/ExamStudentManagement.vue"
          ),
      },
      {
        path: "examstudent/import",
        name: "ExamStudentImport",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/ExamStudentImport/ExamStudentImport.vue"
          ),
      },
      {
        path: "course",
        name: "CourseManagement",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/CourseManagement/CourseManagement.vue"
          ),
      },
      {
        path: "student",
        name: "StudentManagement",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/StudentManagement/StudentManagement.vue"
          ),
      },
      {
        path: "invigilate",
        name: "InvigilateManagement",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/InvigilateManagement/InvigilateManagement.vue"
          ),
      },
      {
        path: "task",
        name: "ImportExportTask",
        component: () =>
          import(
            /* webpackChunkName: "exam" */ "../features/examwork/ImportExportTask/ImportExportTask.vue"
          ),
      },
    ],
  },
  {
    path: "/login",
    name: "Login",
    component: () =>
      import(/* webpackChunkName: "Login" */ "../features/Login/Login.vue"),
  },
  {
    path: "/*",
    name: "404",
    component: () =>
      import(/* webpackChunkName: "default" */ "../views/404.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

// FIXME: router.route 添加 auth，代表是否需要认证。
// FIXME: roles. 根据roles来授权。
// FIXME: 在Login页面，验证通过后，返回redirectTo 页面。
router.beforeEach((to, from, next) => {
  if (to.path) {
    window._hmt.push(["_trackPageview", to.fullPath]);
  }

  const token = getToken();
  if (isNil(token) && to.path.includes("/login") === false) {
    router.push("/login?redirectTo=" + encodeURI(to.fullPath));
    next(false);
  } else {
    next();
  }
});

export default router;