⽤户功能与学习功能需要登录才能访问,如果未登录,应跳转到登录⻚⾯。 这⾥通过 Vue Router 的导航守卫处理。 // router/index.js … import store from ‘@/store’ … { path: ‘/learn’, name: ‘learn’, component: () => import(/ webpackChunkName: ‘learn’ /‘@/vie ws/learn/index’), meta: { requiresAuth: true } }, { path: ‘/user’, name: ‘user’, component: () => import(/ webpackChunkName: ‘user’ /‘@/view s/user/index’), meta: { requiresAuth: true } } … // 导航守卫进⾏登录检测与跳转 router.beforeEach((to, from, next) => { // 验证 to 路由是否需要进⾏身份认证 if (to.matched.some(record => record.meta.requiresAuth)) { // 验证 Vuex 的 store 中的登录⽤户信息是否存储 if (!store.state.user) { // 未登录,跳转到登录⻚ return next({ name: ‘login’ }) } // 已经登录,允许通过 next() } else { next() } }) export default router