hookehuyr

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

重构路由认证检查逻辑,使用更灵活的正则和精确匹配模式,提高代码可维护性
/*
* @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',
'/profile/courses',
'/profile/orders',
'/profile/favorites',
'/checkout'
{
path: '/profile',
exact: false,
},
{
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))) {
if (!currentUser) {
// 未登录时重定向到登录页面
next({ path: '/login', query: { redirect: to.fullPath } })
return
// 检查当前路由是否需要认证
const needAuth = authRequiredRoutes.some((route) => {
// 如果是正则匹配模式
if (route.regex) {
return new RegExp(`^${route.path}$`).test(to.path)
}
// 如果是精确匹配模式
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()
......