添加路由守卫

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',
+			path: "/login",
+			name: "login",
 			//@ts-ignore
-      component: () => import('../views/login/index.vue'),
+			component: () => import("../views/login/index.vue"),
 		},
 		{
-      path: '/test',
-      name: 'test',
-      component: () => import('../views/Test.vue'),
+			path: "/test",
+			name: "test",
+			component: () => import("../views/Test.vue"),
 		},
 		{
-      path: '/home',
-      name: 'home',
+			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'),
+			component: () => import("../views/home/index.vue"),
 			children: [
 				{
-          path: '/graphite',
-          name: 'graphite',
-          component: () => import('../views/graphite/index.vue'),
+					path: "/graphite",
+					name: "graphite",
+					component: () => import("../views/graphite/index.vue"),
 				},
 				{
-          path: '/logRecords',
-          name: 'logRecords',
-          component: () => import('../views/logRecord/index.vue'),
+					path: "/logRecords",
+					name: "logRecords",
+					component: () => import("../views/logRecord/index.vue"),
 				},
 				{
-          path: '/expeRecords',
-          name: 'expeRecords',
-          component: () => import('../views/expeRecord/index.vue'),
+					path: "/expeRecords",
+					name: "expeRecords",
+					component: () => import("../views/expeRecord/index.vue"),
 				},
 				{
-          path: '/addLiquid',
-          name: 'addLiquid',
-          component: () => import('../views/addLiquid/index.vue'),
+					path: "/addLiquid",
+					name: "addLiquid",
+					component: () => import("../views/addLiquid/index.vue"),
 				},
 				{
-          path: '/liquidConfig',
-          name: 'liquidConfig',
-          component: () => import('../views/liquidConfig/index.vue'),
+					path: "/liquidConfig",
+					name: "liquidConfig",
+					component: () => import("../views/liquidConfig/index.vue"),
 				},
 				{
-          path: '/oreManage',
-          name: 'oreManage',
-          component: () => import('../views/oreManage/index.vue'),
+					path: "/oreManage",
+					name: "oreManage",
+					component: () => import("../views/oreManage/index.vue"),
 				},
 				{
-          path: '/userManage',
-          name: 'userManage',
-          component: UserManage
+					path: "/userManage",
+					name: "userManage",
+					component: UserManage,
 				},
 				{
-          path: '/debug',
-          name: 'debug',
-          component: Debug
-        }
-      ]
+					path: "/debug",
+					name: "debug",
+					component: Debug,
+				},
+			],
 		},
 	],
-})
+});
+
+function isAuthenticated() {
+	return !!sessionStorage.getItem("token");
+}
+
+router.beforeEach((to, from) => {
+	if (!isAuthenticated() && to.name !== "login") {
+		return { name: "login" };
+	}
+});
 
-export default router
+export default router;