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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。