refactor(router): 优化路由认证检查逻辑

重构路由认证检查逻辑，使用更灵活的正则和精确匹配模式，提高代码可维护性

refactor(router): 优化路由认证检查逻辑
重构路由认证检查逻辑，使用更灵活的正则和精确匹配模式，提高代码可维护性
hookehuyr
Commit 7f32a44cf06ec34dc43a3232c210d58b536624ec 7f32a44c 1 parent 22598778
Showing 1 changed file with 49 additions and 30 deletions
src/router/index.js
--- a/src/router/index.js
View file @7f32a44
+++ b/src/router/index.js
View file @7f32a44
 /*
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-21 15:59:36
+ * @LastEditTime: 2025-03-21 17:58:10
  * @FilePath: /mlaj/src/router/index.js
  * @Description: 文件描述
  */
@@ -31,13 +31,13 @@ const routes = [
     path: '/courses/:id/reviews',
     name: 'CourseReviews',
     component: () => import('../views/courses/CourseReviewsPage.vue'),
-    meta: { title: '课程评价' }
+    meta: { title: '课程评价' },
   },
   {
     path: '/courses-list',
     name: 'CourseList',
     component: () => import('../views/courses/CourseListPage.vue'),
-    meta: { title: '课程列表' }
+    meta: { title: '课程列表' },
   },
   {
     path: '/profile',
@@ -49,79 +49,79 @@ const routes = [
     path: '/login',
     name: 'Login',
     component: () => import('../views/auth/LoginPage.vue'),
-    meta: { title: '登录' }
+    meta: { title: '登录' },
   },
   {
     path: '/register',
     name: 'Register',
     component: () => import('../views/auth/RegisterPage.vue'),
-    meta: { title: '注册' }
+    meta: { title: '注册' },
   },
   {
     path: '/forgotPwd',
     name: 'ForgotPassword',
     component: () => import('../views/auth/ForgotPasswordPage.vue'),
-    meta: { title: '忘记密码' }
+    meta: { title: '忘记密码' },
   },
   {
     path: '/activities',
     name: 'Activities',
     component: () => import('../views/activities/ActivitiesPage.vue'),
-    meta: { title: '活动列表' }
+    meta: { title: '活动列表' },
   },
   {
     path: '/activities/:id',
     name: 'ActivityDetail',
     component: () => import('../views/activities/ActivityDetailPage.vue'),
     props: true,
-    meta: { title: '活动详情' }
+    meta: { title: '活动详情' },
   },
   {
     path: '/activities/:id/signup',
     name: 'ActivitySignup',
     component: () => import('../views/activities/ActivitySignupPage.vue'),
     meta: {
-      title: '活动报名'
+      title: '活动报名',
-    }
+    },
   },
   {
     path: '/profile/activities',
     name: 'MyActivities',
     component: () => import('../views/activities/MyActivitiesPage.vue'),
-    meta: { title: '我的活动' }
+    meta: { title: '我的活动' },
   },
   {
     path: '/checkout',
     name: 'CheckoutPage',
     component: () => import('../views/checkout/CheckoutPage.vue'),
     props: true,
-    meta: { title: '结账' }
+    meta: { title: '结账' },
   },
   {
     path: '/profile/courses',
     name: 'MyCourses',
     component: () => import('../views/courses/MyCoursesPage.vue'),
-    meta: { title: '我的课程' }
+    meta: { title: '我的课程' },
   },
   {
     path: '/profile/orders',
     name: 'Orders',
     component: () => import('../views/profile/OrdersPage.vue'),
-    meta: { title: '我的订单' }
+    meta: { title: '我的订单' },
   },
   {
     path: '/profile/favorites',
     name: 'MyFavorites',
     component: () => import('../views/profile/MyFavoritesPage.vue'),
-    meta: { title: '我的收藏' }
+    meta: { title: '我的收藏' },
   },
   {
     path: '/test',
     name: 'test',
     component: () => import('../views/test.vue'),
-    meta: { title: 'test' }
+    meta: { title: 'test' },
   },
-  ...checkinRoutes
+  ...checkinRoutes,
 ]
 const router = createRouter({
@@ -130,30 +130,49 @@ const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
     // 每次路由切换后，页面滚动到顶部
     return savedPosition || { top: 0, left: 0 }
-  }
+  },
 })
 // 需要登录才能访问的路由
 const authRequiredRoutes = [
-  '/profile',
+  {
-  '/profile/activities',
+    path: '/profile',
-  '/profile/courses',
+    exact: false,
-  '/profile/orders',
+  },
-  '/profile/favorites',
+  {
-  '/checkout'
+    path: '/checkout',
+    exact: true,
+  },
+  {
+    path: '/activities/[^/]+/signup',
+    regex: true,
+  },
 ]
 // 导航守卫
 router.beforeEach((to, from, next) => {
   const currentUser = JSON.parse(localStorage.getItem('currentUser'))
-  // 检查是否需要认证
+  // 检查当前路由是否需要认证
-  if (authRequiredRoutes.some(route => to.path.startsWith(route))) {
+  const needAuth = authRequiredRoutes.some((route) => {
-    if (!currentUser) {
+    // 如果是正则匹配模式
-      // 未登录时重定向到登录页面
+    if (route.regex) {
-      next({ path: '/login', query: { redirect: to.fullPath } })
+      return new RegExp(`^${route.path}$`).test(to.path)
-      return
+    }
+    // 如果是精确匹配模式
+    if (route.exact) {
+      return to.path === route.path
     }
+    // 默认前缀匹配模式
+    // 判断路由路径是否以指定路径开头，用于匹配需要认证的路由及其子路由
+    // 例如: /profile/courses 应该匹配 /profile 规则
+    return to.path.startsWith(route.path)
+  })
+
+  if (needAuth && !currentUser) {
+    // 未登录时重定向到登录页面
+    next({ path: '/login', query: { redirect: to.fullPath } })
+    return
   }
   next()