前端vue+elementUI如何实现记住密码功能


Posted in Javascript onSeptember 20, 2020

我们这回使用纯前端保存密码

既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取

先来了解下cookie的基本使用吧

Cookie

所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔。就像这样:

"key1=value1; key2=value2; key3=value3"
	// 使用document.cookie 来获取所有cookie
	docuemnt.cookie = "id="+value

操作cookie

/**
 * 设置cookie值
 *
 * @param {String} name cookie名称
 * @param {String} value cookie值
 * @param {Number} expiredays 过期时间,天数
 */
 function setCookie (name, value, expiredays) {
 let exdate = new Date() 
 		//setDate获取N天后的日期
 exdate.setDate(exdate.getDate() + expiredays) //getDate() 获取当前月份的日 + 过期天数
 document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
 }
 /**
 * 获取cookie值
 * @param {String} name cookie名称
 */
 function getCookie (name) {
  var arr = document.cookie.split(";") //转换数组
  //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
  for(var i=0;i<arr.length;i++){
   var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
   if(arr2[0].trim() == name){
    return arr2[1]
   }
  }
 }
 /**
 * 删除指定cookie值
 * @param {String} name cookie名称
 */
 function clearCookie (name) {
 setCookie(name, '', -1)
 }
 /**
 * 浏览器是否支持本地cookie
 */
 function isSupportLocalCookie () {
 let {name, value} = {name: 'name', value: 'mingze'}
 setCookie(name, value, 1) //设置cookie
 return getCookie(name).includes(value) //includes 判断数组name中是否含有当前value(返回true or false)
 }

好了了解了cookie我们开始如何实现一个简单的记住密码功能

HTML代码

<el-form :model="ruleForm" :rules="rules"
 status-icon
 ref="ruleForm" 
 label-position="left" 
 label-width="0px" 
 class="demo-ruleForm login-page">
 <h3 class="title">系统登录</h3>
<el-form-item prop="username">
  <el-input type="text" 
   v-model="ruleForm2.username" 
   auto-complete="off" 
   placeholder="用户名"
  ></el-input>
 </el-form-item>
<el-form-item prop="password">
  <el-input type="password" 
   v-model="ruleForm2.password" 
   auto-complete="off" 
   placeholder="密码"
  ></el-input>
 </el-form-item>
<el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">记住密码</el-checkbox>
<el-form-item style="width:100%;">
 <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录	</el-button>
</el-form-item>
</el-form>

vue代码

data(){
  return {
  	 logining: false,
   checked: true
   ruleForm: {
    username: '',
    password: '',
   },
   rules: {
    username: [{required: true, message: '请输入您的帐户', trigger: 'blur'}],
    password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
   },
  }
 },
 mounted() {
  this.account() //获取cookie的方法
 },
 account(){
  if(document.cookie.length <= 0){
   console.log(this.getCookie('mobile'))
   this.ruleForm.username = this.getCookie('mobile')
   this.ruleForm.password = this.getCookie('password')
  }
 },
 setCookie(c_name,c_pwd,exdate){ //账号,密码 ,过期的天数
  var exdate = new Date()
  console.log(c_name,c_pwd)
  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天数
  document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
  document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
 },
 getCookie(name){
  var arr = document.cookie.split(";") 
   //["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
   for(var i=0;i<arr.length;i++){
    var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
    if(arr2[0].trim() == name){
     return arr2[1]
    }
   }
  },
  clearCookie(){
   this.setCookie("","",-1) //清除cookie 
  },
	handleSubmit(){ //提交登录
	 this.$refs.ruleForm.validate((valid) => {
   if(valid){
   	this.logining = true;
   	var _this = this;
   	if(_this.checked == true){
   	 	//存入cookie
    _this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天
   }else{
    _this.clearCookie();
   }
   Login({
    mobile:_this.ruleForm.username,
    password:_this.ruleForm.password
   }).then((result) => {
    console.log(result)
    _this.$alert('登陆成功')
   })
  }
	}

好了,这回的记住密码就到这里,小伙伴们一起努力吧 ^ 0 ^

总结

到此这篇关于前端vue+elementUI如何实现记住密码功能的文章就介绍到这了,更多相关vue+elementUI记住密码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Js类的构建与继承案例详解
Sep 15 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 #Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 #Javascript
vue-cli3 热更新配置操作
Sep 18 #Javascript
vue-cli 关闭热更新操作
Sep 18 #Javascript
Node.JS如何实现JWT原理
Sep 18 #Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 #Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 #Javascript
You might like
PHP数字格式化
2006/12/06 PHP
php中的strpos使用示例
2014/02/27 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
Python 深入理解yield
2008/09/06 Python
Python程序设计入门(3)数组的使用
2014/06/16 Python
详解Python当中的字符串和编码
2015/04/25 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
pyspark 随机森林的实现
2020/04/24 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Python多分支if语句的使用
2020/09/03 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
年度考核自我鉴定
2014/02/02 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
公益广告宣传方案
2014/02/28 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
世界红十字日活动总结
2015/02/10 职场文书
超市员工管理制度
2015/08/06 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang