未加星标

vue项目实现记住密码到cookie功能示例(附源码)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下:

vue项目实现记住密码到cookie功能示例(附源码)
登陆页面

实现功能:

1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内
2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入
大体思路就是通过存/取/删cookie实现的;每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如上:

直接上主要的代码

HTML部分

<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
</el-form-item>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">记住密码</el-checkbox>
<br>
<br>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</div>
</el-form>
</div>

JS部分

//页面加载调用获取cookie值
mounted() {
this.getCookie();
},
methods: {
submitForm(formName) { const self = this;//判断复选框是否被勾选 勾选则调用配置cookie方法if (self.checked == true) { console.log("checked == true"); //传入账号名,密码,和保存天数3个参数 self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);}else { console.log("清空Cookie"); //清空Cookie self.clearCookie();}//与后端请求代码,本功能不需要与后台交互所以省略console.log("登陆成功");

});
},
//设置cookie
setCookie(c_name, c_pwd, exdays) {
var exdate = new Date(); //获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
//字符串拼接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 < arr.length; i++) {var arr2 = arr[i].split('='); //再次切割//判断查找相对应的值if (arr2[0] == 'userName') { this.ruleForm.username = arr2[1]; //保存到保存数据的地方} else if (arr2[0] == 'userPwd') { this.ruleForm.password = arr2[1];}
}
}
},
//清除cookie
clearCookie: function() {
this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
}
浏览器中的cookie信息如下图,注意这里的cookie的expire/Max-Age过期时间,这个时间是格林尼治标准时间GMT,世界统一的时间,GMT+8小时就是北京时间。(这里不做加密功能)
vue项目实现记住密码到cookie功能示例(附源码)

源码链接 vue项目实现表单登录页保存账号和密码到cookie功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:浅谈Vue SSR 的 Cookies 问题VUE前端cookie简单操作在Vue中如何使用Cookie操作实例详解Vue用axios发送post请求自动set cookie

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 浏览器HTMLGM数据VU北京
tags: cookie,gt,lt,el,ruleForm,form,勾选,self,arr2,exdate,password,checked,username
分页:12
转载请注明
本文标题:vue项目实现记住密码到cookie功能示例(附源码)
本站链接:https://www.codesec.net/view/572245.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(72)