vue-router的登陆权限判断主要是在全局钩子函数中进行的,我们在router.js文件中的定义路由里,将需要登陆权限的页面加上meta属性,值是对象的形式,然后在该对象中自定义一个属性,属性值就是一个Boolean值,这时候在main.js文件的全局钩子函数中进行判断,如果需要跳转的页面的自定义属性值为true,那么将进行判断其是否登录,如果没有登录,则告诉用户登录,如果有登录,那么进行页面跳转。
routes:[
{
path:"/home",
name:"Home",
components:Home
meta:{requireAuth:true}
}
]
router.beforeEach((to,from,next) => {
if(to.meta.requireAuth){//判断该路由是否需要登录权限
if(store.state.token){//通过vuex的state获取当前的token是否存在
next()
}else{
next({
path:"/one",
query:{redirect:to.fullPath}//将跳转的路由path作为参数,登陆成功后跳转到该路由
})
}
}else{
next();
}
})