vue路由的钩子函数beforeEach，afterEach导航守卫
在路由的配置文件里
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
-------------------------------demo01--------------------------------------
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
if (axiosCookie.getCookie("user_id")) {// 判断是否登录
next()
} else {// 没登录则跳转到登录界面
next({
path: '/user/login',
query: {redirect: to.fullPath}
})
}
} else {
next()
}
})
------------------------demo02---------------------------------------------
//路由跳转前验证登录
vueRouter.beforeEach(function(to,from,next){
// console.log(to);
// console.log(from);
// console.log(next);
// let login = localStorage.getItem('token'); //判断登录状态的; 也可以从 store 里拿到这个状态const auth = store.state.auth.IsLogin;
let login = true; //临时赋值 让函数能执行
let path = to.path
if (path === '/user/login') {
next()
return
}
if (login) {
if (path === '/') { //默认跳到首页
console.log('走了这里');
next({
path: '/Home'
})
} else {
console.log('走了默认');
next(); //进行管道中的下一个钩子
}
}else {
next({
path: '/user/login' //跳转到一个不同的地址
})
}
});
---------------------------------------------------------------------
写在main.js里axios的config配置里
const userId = axiosCookie.getCookie("user_id");
if (userId) {
//config.headers.cookie = 'user_id='+userId+';secure';
document.cookie = 'user_id='+userId+';secure';
}
getCookie见阿里云文件库
相关文献：
https://blog.csdn.net/latency_cheng/article/details/78580161 方法解释
https://www.cnblogs.com/wuvkcyan/p/9311155.html 方法解释
https://segmentfault.com/q/1010000015834262