前端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 插件开发 extjs中的extend用法小结
Jan 04 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
基于JavaScript表单脚本(详解)
Oct 18 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 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
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
php实现Mysql简易操作类
2015/10/11 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python中一些深不见底的“坑”
2019/06/12 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python连接mysql有哪些方法
2020/06/24 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
保护环境建议书300字
2014/05/13 职场文书
美食节目策划方案
2014/05/31 职场文书
应届大专生求职信
2014/06/26 职场文书
小浪底导游词
2015/02/12 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python