remmima 不能保存_Vue项目实现表单登录页保存账号和密码到cookie功能_婳祎_前端开发者...
實現(xiàn)功能：
1.一周內(nèi)自動登錄勾選時，將賬號和密碼保存到cookie，下次登陸自動顯示到表單內(nèi)
2.點擊忘記密碼則清空之前保存到cookie的值，下次登陸需要手動輸入
次要的就不說了直接上主要的代碼
登陸
幫助
一周內(nèi)自動登錄
忘記密碼？
登陸
data () {
return {
ruleForm: {
userName: '', //用戶名
password: '' //密碼
},
}
}
methods: {
//點擊登錄調(diào)用方法
submitForm(formName) {
//保存的賬號
var name=this.ruleForm.userName;
//保存的密碼
var pass=this.ruleForm.password;
if(name==''||name==null){
alert("請輸入正確的用戶名");
return
}else if(pass==''||pass==null) {
alert("請輸入正確的密碼");
return
}
//判斷復(fù)選框是否被勾選 勾選則調(diào)用配置cookie方法
if(this.checked=true){
//傳入賬號名，密碼，和保存天數(shù)3個參數(shù)
this.setCookie(name,pass,7);
}
//接口
var url='myserver/user/login';
this.$http.post(url,this.ruleForm,{emulateJSON:true})
.then(res=>{
if(res.body=="fail"){
alert("用戶名或密碼錯誤,請重新輸入");
this.ruleForm.userName='';
this.ruleForm.password='';
return
} else{
alert("登陸成功！")
this.$router.push("/index")
}
});
},
//設(shè)置cookie
setCookie(c_name,c_pwd,exdays) {
var exdate=new Date();//獲取時間
exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天數(shù)
//字符串拼接cookie
window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();
window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();
},
//讀取cookie
getCookie:function () {
if (document.cookie.length>0) {
var arr=document.cookie.split('; ');//這里顯示的格式需要切割一下自己可輸出看下
for(var i=0;i
var arr2=arr[i].split('=');//再次切割
//判斷查找相對應(yīng)的值
if(arr2[0]=='userName'){
this.ruleForm.userName=arr2[1];//保存到保存數(shù)據(jù)的地方
}else if(arr2[0]=='userPwd'){
this.ruleForm.password=arr2[1];
}
}
}
},
//清除cookie
clearCookie:function () {
this.setCookie("","",-1);//修改2值都為空，天數(shù)為負1天就好了
}
},
//頁面加載調(diào)用獲取cookie值
mounted(){
this.getCookie()
}
總結(jié)
以上所述是小編給大家介紹的開發(fā)者網(wǎng)站的支持！
總結(jié)
以上是生活随笔為你收集整理的remmima 不能保存_Vue项目实现表单登录页保存账号和密码到cookie功能_婳祎_前端开发者...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： USTC English Club No
- 下一篇： 重磅：专门《Vue2.0基础》设计的1套