思路
- 进入页面
- 若未登录,跳转至登陆页面
- 若已登录,从cookie中获取用户信息,并执行后续操作
2. 登录页面,存入cookie(setCookie)
import {setCookie,getCookie}from \'src/js/cookieUtil\'
methods: {
async cheack_n_p () {
if( this.checkCode === this.pwd) {
this.loginData = await getUserInfo(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(\"验证码错误!\")
}
}
},
//验证手机号码部分
async sendcode(){
var pattern = /^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 = (await getUserPhoneCode(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 () {
// return this.$store.getters.getLogin;
this.userId = getCookie(\"userId\");
// console.log(this.userId);
return this.userId;
}
},
3. cookieUtil(setCookie,getCookie)
/**
* Created by Schon on 2018/9/13 0013.
*/
//设置cookie
export function setCookie(key,value) {
var exdate = new Date(); //获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 36500); //保存的天数,我这里写的是100年
//字符串拼接cookie
window.document.cookie = key + \"=\" + value + \";path=/;expires=\" + exdate.toGMTString();
};
//读取cookie
export function getCookie(param) {
var c_param = \'\';
if (document.cookie.length > 0) {
var arr = document.cookie.split(\'; \'); //这里显示的格式需要切割一下自己可输出看下
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split(\'=\'); //再次切割
//判断查找相对应的值
if (arr2[0] == param) {
c_param = arr2[1];
//保存到保存数据的地方
}
}
return c_param;
}
};
function padLeftZero (str) {
return (\'00\' + str).substr(str.length);
};
总结
以上所述是小编给大家介绍的vue通过cookie获取用户登录信息的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
继续阅读与本文标签相同的文章
-
选择按钮搭配VBA实现数据小型自动化
2026-05-18栏目: 教程
-
Python高级进阶#011 pyqt5按钮QPushButton应用
2026-05-18栏目: 教程
-
Apache Solr Velocity模版注入远程命令执行漏洞复线
2026-05-18栏目: 教程
-
从订货会的功能变迁看出版业的沧海桑田
2026-05-18栏目: 教程
-
ASP.NET Core on K8S深入学习(9)Secret & Configmap
2026-05-18栏目: 教程
