使用vue+elementUI如何实现记住密码功能

发布时间:2020-11-02 17:23:45 作者:Leah
来源:亿速云 阅读:380

使用vue+elementUI如何实现记住密码功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

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">
 <h4 class="title">系统登录</h4>
<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" >记住密码</el-checkbox>
<el-form-item >
 <el-button type="primary"  @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('登陆成功')
   })
  }
	}

看完上述内容,你们掌握使用vue+elementUI如何实现记住密码功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 如何使用localStorage实现记住密码的功能
  2. 如何使用vue+elementUI组件table实现前端分页功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue elementui ue

上一篇:Vue+element+cookie实现一个记住密码功能

下一篇:vue缓存之keep-alive的理解和应用详解

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》