路由-全局守卫

目标

• 登录成功时, 不允许切换路径进入登录页面

步骤

方法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()}},

小结

1. 路由守卫有很多种, 具体查阅文档

2. 重点多看看路由执行的过程和注意事项