目标
登录成功时, 不允许切换路径进入登录页面
步骤
方法1: 全局前置守卫判断
router.beforeEach((to,from, next)=>{
// 有token, 不能去登录页
// 无token, 需要用户"权限"的才需要去登录页
if(store.state.token.length>0&& to.path==='/login'){
// 证明有token-已经登录了
next(false)
// 阻止跳转原地呆着
}else{
next()
}
})
方法2: 路由独享守卫
{
path:'/login',component:()=>import(/* webpackChunkName: "Login" */'@/views/Login'),beforeEnter(to,from, next){if(store.state.token.length>0){// vuex里有token(代表登录过, 但是一定要注意过期和主动退出要先清除vuex和本地的token, 让其跳转登录页)returnnext(false)}next()}},
{
path:'/login',
component:()=>import(/* webpackChunkName: "Login" */'@/views/Login'),beforeEnter(to,from, next){if(store.state.token.length>0){// vuex里有token(代表登录过, 但是一定要注意过期和主动退出要先清除vuex和本地的token, 让其跳转登录页)returnnext(false)}next()}},
小结
路由守卫有很多种, 具体查阅文档
重点多看看路由执行的过程和注意事项