index.js 4.54 KB
/*
 * @Date: 2025-03-20 20:36:36
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-21 17:58:10
 * @FilePath: /mlaj/src/router/index.js
 * @Description: 文件描述
 */
import { createRouter, createWebHashHistory } from 'vue-router'
import checkinRoutes from './checkin'

const routes = [
  {
    path: '/',
    name: 'HomePage',
    component: () => import('../views/HomePage.vue'),
    meta: { title: '美乐爱觉' },
  },
  {
    path: '/courses',
    name: 'Courses',
    component: () => import('../views/courses/CoursesPage.vue'),
    meta: { title: '课程' },
  },
  {
    path: '/courses/:id',
    name: 'CourseDetail',
    component: () => import('../views/courses/CourseDetailPage.vue'),
    meta: { title: '课程详情' },
  },
  {
    path: '/courses/:id/reviews',
    name: 'CourseReviews',
    component: () => import('../views/courses/CourseReviewsPage.vue'),
    meta: { title: '课程评价' },
  },
  {
    path: '/courses-list',
    name: 'CourseList',
    component: () => import('../views/courses/CourseListPage.vue'),
    meta: { title: '课程列表' },
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('../views/profile/ProfilePage.vue'),
    meta: { title: '个人中心' },
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/auth/LoginPage.vue'),
    meta: { title: '登录' },
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/auth/RegisterPage.vue'),
    meta: { title: '注册' },
  },
  {
    path: '/forgotPwd',
    name: 'ForgotPassword',
    component: () => import('../views/auth/ForgotPasswordPage.vue'),
    meta: { title: '忘记密码' },
  },
  {
    path: '/activities',
    name: 'Activities',
    component: () => import('../views/activities/ActivitiesPage.vue'),
    meta: { title: '活动列表' },
  },
  {
    path: '/activities/:id',
    name: 'ActivityDetail',
    component: () => import('../views/activities/ActivityDetailPage.vue'),
    props: true,
    meta: { title: '活动详情' },
  },
  {
    path: '/activities/:id/signup',
    name: 'ActivitySignup',
    component: () => import('../views/activities/ActivitySignupPage.vue'),
    meta: {
      title: '活动报名',
    },
  },
  {
    path: '/profile/activities',
    name: 'MyActivities',
    component: () => import('../views/activities/MyActivitiesPage.vue'),
    meta: { title: '我的活动' },
  },
  {
    path: '/checkout',
    name: 'CheckoutPage',
    component: () => import('../views/checkout/CheckoutPage.vue'),
    props: true,
    meta: { title: '结账' },
  },
  {
    path: '/profile/courses',
    name: 'MyCourses',
    component: () => import('../views/courses/MyCoursesPage.vue'),
    meta: { title: '我的课程' },
  },
  {
    path: '/profile/orders',
    name: 'Orders',
    component: () => import('../views/profile/OrdersPage.vue'),
    meta: { title: '我的订单' },
  },
  {
    path: '/profile/favorites',
    name: 'MyFavorites',
    component: () => import('../views/profile/MyFavoritesPage.vue'),
    meta: { title: '我的收藏' },
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/test.vue'),
    meta: { title: 'test' },
  },
  ...checkinRoutes,
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.VITE_BASE || '/'),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 每次路由切换后,页面滚动到顶部
    return savedPosition || { top: 0, left: 0 }
  },
})

// 需要登录才能访问的路由
const authRequiredRoutes = [
  {
    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'))

  // 检查当前路由是否需要认证
  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()
})

export default router