前端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 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
js类型检查实现代码
Oct 29 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
JavaScript Array对象详解
Mar 01 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
简化版的vue-router实现思路详解
Oct 19 Javascript
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
thinkPHP实现表单自动验证
2014/12/24 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php fread函数使用方法总结
2019/05/28 PHP
许愿墙中用到的函数
2006/10/07 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python实现复制大量文件功能
2019/08/31 Python
Python 解析简单的XML数据
2020/07/24 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
乡镇三项教育实施方案
2014/03/30 职场文书
在职证明范本
2015/06/15 职场文书
七一晚会主持词
2015/06/29 职场文书
中学教师读书笔记
2015/07/01 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python