参考Vue-Router官方文档
Vue-Router导航守卫
效果展示
1、给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性
{ // 小智同学
name: 'user-chat',
path: '/user/chat',
component: () => import('@/views/user-chat'),
meta: { requiresAuth: true }
},
2、通过路由拦截器统一校验
router.beforeEach((to, from, next) => {
if (to.name === 'login' || !to.meta.requiresAuth) {
return next()
}
if (store.state.user) {
return next()
}
Dialog.confirm({
title: '该功能需要登录,确认登录吗?'
}).then(() => {
next({
name: 'login',
query: {
redirect: from.fullPath
}
})
}).catch(() => {
// on cancel
})
})