添加路由守卫

src/router/index.ts

@@ -1,72 +1,82 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import UserManage from '@/views/userManage/UserManage.vue'
-import Debug from '@/views/debug/debug.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import UserManage from "@/views/userManage/UserManage.vue";
+import Debug from "@/views/debug/debug.vue";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/login',
-      name: 'login',
-      //@ts-ignore
-      component: () => import('../views/login/index.vue'),
-    },
-    {
-      path: '/test',
-      name: 'test',
-      component: () => import('../views/Test.vue'),
-    },
-    {
-      path: '/home',
-      name: 'home',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/home/index.vue'),
-      children:[
-        {
-          path: '/graphite',
-          name: 'graphite',
-          component: () => import('../views/graphite/index.vue'),
-        },
-        {
-          path: '/logRecords',
-          name: 'logRecords',
-          component: () => import('../views/logRecord/index.vue'),
-        },
-        {
-          path: '/expeRecords',
-          name: 'expeRecords',
-          component: () => import('../views/expeRecord/index.vue'),
-        },
-        {
-          path: '/addLiquid',
-          name: 'addLiquid',
-          component: () => import('../views/addLiquid/index.vue'),
-        },
-        {
-          path: '/liquidConfig',
-          name: 'liquidConfig',
-          component: () => import('../views/liquidConfig/index.vue'),
-        },
-        {
-          path: '/oreManage',
-          name: 'oreManage',
-          component: () => import('../views/oreManage/index.vue'),
-        },
-        {
-          path: '/userManage',
-          name: 'userManage',
-          component: UserManage
-        },
-        {
-          path: '/debug',
-          name: 'debug',
-          component: Debug
-        }
-      ]
-    },
-  ],
-})
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes: [
+		{
+			path: "/login",
+			name: "login",
+			//@ts-ignore
+			component: () => import("../views/login/index.vue"),
+		},
+		{
+			path: "/test",
+			name: "test",
+			component: () => import("../views/Test.vue"),
+		},
+		{
+			path: "/home",
+			name: "home",
+			// route level code-splitting
+			// this generates a separate chunk (About.[hash].js) for this route
+			// which is lazy-loaded when the route is visited.
+			component: () => import("../views/home/index.vue"),
+			children: [
+				{
+					path: "/graphite",
+					name: "graphite",
+					component: () => import("../views/graphite/index.vue"),
+				},
+				{
+					path: "/logRecords",
+					name: "logRecords",
+					component: () => import("../views/logRecord/index.vue"),
+				},
+				{
+					path: "/expeRecords",
+					name: "expeRecords",
+					component: () => import("../views/expeRecord/index.vue"),
+				},
+				{
+					path: "/addLiquid",
+					name: "addLiquid",
+					component: () => import("../views/addLiquid/index.vue"),
+				},
+				{
+					path: "/liquidConfig",
+					name: "liquidConfig",
+					component: () => import("../views/liquidConfig/index.vue"),
+				},
+				{
+					path: "/oreManage",
+					name: "oreManage",
+					component: () => import("../views/oreManage/index.vue"),
+				},
+				{
+					path: "/userManage",
+					name: "userManage",
+					component: UserManage,
+				},
+				{
+					path: "/debug",
+					name: "debug",
+					component: Debug,
+				},
+			],
+		},
+	],
+});
 
-export default router
+function isAuthenticated() {
+	return !!sessionStorage.getItem("token");
+}
+
+router.beforeEach((to, from) => {
+	if (!isAuthenticated() && to.name !== "login") {
+		return { name: "login" };
+	}
+});
+
+export default router;