功能(鉴权): 增加前端登录态守卫与退出流程

2026-04-12 10:36:38 +08:00
parent cb618807fc
commit 4c73991d64
5 changed files with 106 additions and 71 deletions
@@ -1,56 +1,70 @@
-import {createRouter,createWebHistory} from 'vue-router'
-import Login from "@/components/Login.vue";
-import Study from "@/components/Study.vue";
-import Welcome from "@/components/Welcome.vue";
-import Review from "@/components/Review.vue";
-import StartTask from "@/components/StartTask.vue";
-import TaskForm from "@/components/TaskForm.vue";
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    redirect: "/login",
+  },
+  {
+    path: "/login",
+    component: () => import("@/components/Login.vue"),
+    meta: { requiresAuth: false },
+  },
+  {
+    path: "/welcome",
+    component: () => import("@/components/Welcome.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/study",
+    component: () => import("@/components/Study.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/review",
+    component: () => import("@/components/Review.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/start-task/:taskNum",
+    name: "start-task",
+    component: () => import("@/components/StartTask.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/add-task",
+    name: "add-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      action: "add",
+      buttonText: "添加",
+    },
+  },
+  {
+    path: "/update-task/:taskId",
+    name: "update-task",
+    component: () => import("@/components/TaskForm.vue"),
+    meta: {
+      requiresAuth: true,
+      action: "update",
+      buttonText: "更新",
+    },
+  },
+];

 const router = createRouter({
-    history: createWebHistory(),
-    routes:[
-        {
-          path:'/',
-          redirect:'/login',
-        },
-        {
-            path:'/login',
-            component:Login
-        },
-        {
-            path:'/welcome',
-            component: Welcome
-        },
-        {
-            path:'/study',
-            component: Study
-        },
-        {
-            path:'/review',
-            component: Review
-        },
-        {
-            path:'/start-task/:taskNum',
-            name:'start-task',
-            component: StartTask
-        },
-        {
-            path:'/add-task',
-            name:'add-task',
-            component: TaskForm,
-            meta:{
-                action: 'add', buttonText: '添加'
-            }
-        },
-        {
-            path:'/update-task/:taskId',
-            name:'update-task',
-            component: TaskForm,
-            meta:{
-                action: 'update', buttonText: '更新'
-            }
-        }
-    ]
+  history: createWebHistory(),
+  routes,
 });

-export default router;
+router.beforeEach((to) => {
+  if (to.meta.requiresAuth === false) return true;
+  const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+  if (!isLoggedIn) {
+    return "/login";
+  }
+  return true;
+});
+
+export default router;