vue通过cookie获取用户登录信息的思路详解
思路
- 进入页面
- 若未登录，跳转至登陆页面
- 若已登录，从cookie中获取用户信息，并执行后续操作
2.登录页面，存入cookie（setCookie）
import{setCookie,getCookie}from'src/js/cookieUtil'
methods:{
asynccheack_n_p(){
if(this.checkCode===this.pwd){
this.loginData=awaitgetUserInfo(this.uname,this.pwd,this.adminPhone);
if(this.loginData.res!==0){
setCookie('userName',this.uname);
setCookie('userPwd',this.pwd,);
setCookie('phone',this.uname);
setCookie('userId',this.loginData.obj.id);
setCookie('userType',this.loginData.obj.userType);
setCookie('adminPhone',this.adminPhone);
//this.$router.go(-1);
this.$router.replace('/');
}else{
alert("验证码错误！")
}
}
},
//验证手机号码部分
asyncsendcode(){
varpattern=/^0{0,1}(1[0-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
str=this.uname;
if(!pattern.test(str)){
alert('请正确输入手机号!');
return;
}
this.time=60;
this.disabled=true;
this.timer();
this.checkCode=(awaitgetUserPhoneCode(this.uname)).resMsg;
//this.checkCode='123456';
console.log(this.checkCode)
},
timer:function(){
if(this.time>0){
this.time--;
//console.log(this.time);
this.btntxt=this.time+"s后重新获取";
setTimeout(this.timer,1000);
}else{
this.time=0;
this.btntxt="获取验证码";
this.disabled=false;
}
}
},
2.页面判断
import{setCookie,getCookie}from'src/js/cookieUtil'
mounted(){
if(this.isLogin==undefined||this.isLogin==""){
this.$router.replace('/login');
}else{
//执行后续操作
this.phone=getCookie("phone");
}
},
computed:{
isLogin(){
//returnthis.$store.getters.getLogin;
this.userId=getCookie("userId");
//console.log(this.userId);
returnthis.userId;
}
},
3.cookieUtil（setCookie，getCookie）
/**
*CreatedbySchonon2018/9/130013.
*/
//设置cookie
exportfunctionsetCookie(key,value){
varexdate=newDate();//获取时间
exdate.setTime(exdate.getTime()+24*60*60*1000*36500);//保存的天数，我这里写的是100年
//字符串拼接cookie
window.document.cookie=key+"="+value+";path=/;expires="+exdate.toGMTString();
};
//读取cookie
exportfunctiongetCookie(param){
varc_param='';
if(document.cookie.length>0){
vararr=document.cookie.split(';');//这里显示的格式需要切割一下自己可输出看下
for(vari=0;i
总结
以上所述是小编给大家介绍的vue通过cookie获取用户登录信息的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！