项目中需要有些页面的接口需要用到token,而token是登录接口返回存在cookie里面的.肯定没有登录前这些接口是不能发送的.所以需要做一个登录拦截.在每一个页面去判断是不是有cookie的存在比较的麻烦,查(chao)了(xi)下百度,将自己做的代码记录下:
1:在main.js全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面:
使用了mint-ui中的message-box来提示用户是否跳转到登录界面.
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
if (getCookie('userCookie')) { // 判断当前的token是否存在
// console.log("router.beforeEach进入了");
next();
} else {
MessageBox({
title: '温馨提示',
message: '您没有登录,请立即登录',
showCancelButton: true
}).then(action => {
if (action == 'confirm') {
next({
path: '/login',
query: {
redirect: to.fullPath
} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
});
}
} else {
next();
}
});
2:在路由文件中,配置路由:
哪个路由跳转前需要登录的,配置下meta下的requireAuth的为true就ok了.
{
path: "/withdrawal",//提现
name : "withdrawal",
component : Withdrawal,
meta: {
title: '',
requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
},
},
3:router.beforeEach的理解:
没(bu)有(xiang)时(xie)间(le),回去再来写啦~~~
