How to realize the function of remembering passwords in front end vue+elementUI

We use the pure front end to save the password this time

Since the password is remembered, the front end is saved by cookie and read by cookie when accessing

Let's first understand the basic use of cookie

Cookie

All cookie information is stored in document. cookie, which is a string with cookie separated by semicolons and spaces. It's like this:

	"key1=value1; key2=value2; key3=value3"
	//  Use document.cookie  To get all cookie
	docuemnt.cookie = "id="+value

Operation cookie

	/**
 *  Settings cookie Value 
 *
 * @param {String} name cookie Name 
 * @param {String} value cookie Value 
 * @param {Number} expiredays  Expiration time, days 
 */
 function setCookie (name, value, expiredays) {
 let exdate = new Date() 
 		//setDate Get N Date of days later 
 exdate.setDate(exdate.getDate() + expiredays) //getDate()  Gets the day of the current month  +  Expired days 
 document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
 }
 /**
 *  Get cookie Value 
 * @param {String} name cookie Name 
 */
 function getCookie (name) {
  var arr = document.cookie.split(";") // Convert array 
  //["_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]
   }
  }
 }
 /**
 *  Delete the specified cookie Value 
 * @param {String} name cookie Name 
 */
 function clearCookie (name) {
 setCookie(name, '', -1)
 }
 /**
 *  Does the browser support local cookie
 */
 function isSupportLocalCookie () {
 let {name, value} = {name: 'name', value: 'mingze'}
 setCookie(name, value, 1) // Settings cookie
 return getCookie(name).includes(value) //includes  Judgment array name Contains the current value( Return true or false)
 }

Ok, after understanding cookie, let's start how to implement a simple password remembering function

HTML code

 <el-form :model="ruleForm" :rules="rules"
 status-icon
 ref="ruleForm" 
 label-position="left" 
 label-width="0px" 
 class="demo-ruleForm login-page">
 <h3 class="title"> System login </h3>
<el-form-item prop="username">
  <el-input type="text" 
   v-model="ruleForm2.username" 
   auto-complete="off" 
   placeholder=" User name "
  ></el-input>
 </el-form-item>
<el-form-item prop="password">
  <el-input type="password" 
   v-model="ruleForm2.password" 
   auto-complete="off" 
   placeholder=" Password "
  ></el-input>
 </el-form-item>
<el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0"> Remember the password </el-checkbox>
<el-form-item style="width:100%;">
 <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining"> Login 	</el-button>
</el-form-item>
</el-form>

vue code

 data(){
  return {
  	 logining: false,
   checked: true
   ruleForm: {
    username: '',
    password: '',
   },
   rules: {
    username: [{required: true, message: ' Please enter your account ', trigger: 'blur'}],
    password: [{required: true, message: ' Please enter your password ', trigger: 'blur'}]
   },
  }
 },
 mounted() {
  this.account() // Get cookie Method of 
 },
 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){ // Account number, password   The number of days expired 
  var exdate = new Date()
  console.log(c_name,c_pwd)
  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) // Days saved 
  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) // Clear cookie 
  },
	handleSubmit(){ // Submit login 
	 this.$refs.ruleForm.validate((valid) => {
   if(valid){
   	this.logining = true;
   	var _this = this;
   	if(_this.checked == true){
   	 	// Deposit cookie
    _this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) // Save 7 Days 
   }else{
    _this.clearCookie();
   }
   Login({
    mobile:_this.ruleForm.username,
    password:_this.ruleForm.password
   }).then((result) => {
    console.log(result)
    _this.$alert(' Successful login ')
   })
  }
	}

Ok, that's all for remembering the password this time. Let's work hard, my friends.

Summarize