vue 记住密码下次自动登录

<span>
  <input type="checkBox" name="adviceCheck" id="adviceCheck" :checked="pasChecked" @click="changeChecked" hidden/>
   <label for="adviceCheck" class="advice">下次自动登录</label>
</span>

import tokenUtils from '../../utils/cookieToken'


pasChecked:false

mounted() {
  this.identifyCode = "";
  this.makeCode(this.identifyCodes, 4);
  tokenUtils.getCookie()
},

changeChecked() {
  this.pasChecked = !this.pasChecked;
  this.handleLogin();
},
handleLogin() {
  //保存的账号
  let name=this.loginForm.username;
  //保存的密码
  let pass=this.loginForm.password;
  //判断复选框是否被勾选 勾选则调用配置cookie方法
  if(this.pasChecked == true){
    //传入账号名，密码，和保存天数3个参数
    tokenUtils.setCookie(name,pass,7);
  }else{
    tokenUtils.clearCookie()
  }
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true;
      this.$store.dispatch('login_store', this.loginForm).then(response => {
        var res=response.data;
        console.log(res);
        if (res.status === 200){
          console.log('用户名密码和验证码',this.loginForm);
          console.log('验证码图片中数字',this.identifyCode);
          this.loading = false;
          this.$router.push({ path: '/' })
        }else {
          Message({
            message: res.message,
            type: 'error',
            duration: 800
          })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  });
},

 

utils/cookieToken文件

export default{
  //设置cookie
  setCookie(c_name,c_pwd,exdays) {
    var exdate=new Date();//获取时间
    exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
    //字符串拼接cookie
    window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();
    window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();
  },
  //读取cookie
  getCookie:function () {
    if (document.cookie.length>0) {
      var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
      for(var i=0;i<arr.length;i++){
        var arr2=arr[i].split('=');//再次切割
        //判断查找相对应的值
        if(arr2[0]=='userName'){
          this.loginForm.username=arr2[1];//保存到保存数据的地方
        }else if(arr2[0]=='userPwd'){
          this.loginForm.password=arr2[1];
        }
      }
    }
  },
  //清除cookie
  clearCookie:function () {
    this.setCookie("","",-1);//修改2值都为空，天数为负1天就好了
  },
}

 

点击下次自动登录，再点击登录时，会保存用户名及密码（7天）