Vue 使用beforeEach实现登录状态检查功能
使用VueRouter的beforeEach钩子函数，可以实现导航跳转前检查登录状态的需求。
1.在登录请求接口时返回用户的信息，比如userInfo:{userId:'123',userName:'小明'}，登录成功之后将userInfo存入store中。
2.使用beforeEach实现登录状态检查
vueRouter.beforeEach((to,from,next)=>{
//store的getters中定义获取用户信息的函数getUser
//userId为空说明用户未登录
letisLogin=store.getters.getUser.userId;
if(!isLogin){//未登录
if(to.path!=='/login'){//跳转到登录页
returnnext({path:'/login'});
}else{
next();
}
}else{//已登录
if(to.path==='/login'){//跳转到首页
returnnext({path:'/index'});
}
next();
}
});
如果需要退出登录，只需要将保存在store中的用户信息置空即可。
以上这篇Vue使用beforeEach实现登录状态检查功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。