思路
vue router 给路由添加一个自定义的meta对象,然后通过判断自定义的meta对象内的自定义属性,设置不同的校验。 再通过vue router导航守卫router.beforeEach()
,再进入前进行检验拦截。
router 路由配置
{
path: '/',
name: 'Admin',
meta: {
requireAuth: true,
},
component: () => import('../views/Admin.vue')
},
使用router.beforeEach()
router.beforeEach((to,from,next)=>{
// 判断是否需要登录权限
if(to.meta.requireAuth){
// 通过token判断是否登录
if(store.state.userData.token || sessionStorage.getItem("token")){
console.log("登陆成功!跳转到/home");
next();
}
else{
next({
path:'/login',
// 将跳转的路由path作为参数,登录成功后跳转该路由
// query:{redirect: to.fullPath}
})
}
}
else{
next();
}
})