前端vue+elementUI记住密码功能

我们这回使用纯前端保存密码

既然是记住密码，前端也就是使用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 currentDate = new Date()
        console.log(c_name,c_pwd)
        currentDate.setTime(currentDate.getTime() + 24 * 60 * 60 * 1000 * exdate)  //保存的天数
        document.cookie ="mobile="+c_name+";path=/;expires="+currentDate.toLocaleString()
        document.cookie ="password="+c_pwd+";path=/;expires="+currentDate.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 ^