前端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 相关文章推荐
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
JS创建对象的写法示例
Nov 04 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
vue3不同环境下实现配置代理
May 25 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
jquery的live使用注意事项
2014/02/18 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python K近邻算法的kd树实现
2018/09/06 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
项目工作说明书
2014/07/29 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书