vue 记住密码下次自动登录

<div>
  <input id="adviceCheck" type="checkBox" name="adviceCheck" :checked="pasChecked" @click="changeChecked" />
  <label for="adviceCheck" class="advice">下次自动登录</label>
</div>
<el-button type="primary" :loading="logining"  @click="login('loginForm')">登录</el-button>


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

data() {
  return {
    ruleForm: {
      account: '',
      password: ''
    },
    pasChecked: false
  }
},

mounted() {
  tokenUtils.getCookie(this.ruleForm.account, this.ruleForm.password)
},


methods: {
  changeChecked() {
    this.pasChecked = !this.pasChecked
  },

  loginYz(form) {
    this.$refs[form].validate(valid => {
      if (valid) {
        // 保存的账号
        const name = this.ruleForm.account
        // 保存的密码
        const pass = this.ruleForm.password
        // 判断复选框是否被勾选 勾选则调用配置cookie方法
        if (this.pasChecked == true) {
          // 传入账号名，密码，和保存天数3个参数
          tokenUtils.setCookie(name, pass, 7)
        } else {
          tokenUtils.clearCookie()
        }
        // this._login()
      } else {
        return
      }
    })
  },
}

utils/cookieToken文件

export default {
  // 设置cookie
  setCookie(c_name, c_pwd, exdays) {
    const exdate = new Date()// 获取时间
    exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 保存的天数
    // 字符串拼接cookie
    const expires = 'expires=' + exdate.toUTCString()
    window.document.cookie = 'userName=' + c_name + ';path=/;' + expires
    window.document.cookie = 'userPwd=' + c_pwd + ';path=/;' + expires
  },
  // 读取cookie
  getCookie(userName, password) {
    if (document.cookie.length > 0) {
      const arr = document.cookie.split('; ')// 这里显示的格式需要切割一下自己可输出看下
      for (let i = 0; i < arr.length; i++) {
        const arr2 = arr[i].split('=')// 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'userName') {
          userName = arr2[1]// 保存到保存数据的地方
        } else if (arr2[0] === 'userPwd') {
          password = arr2[1]
        }
      }
    }
  },

或
 // 读取cookie
  getCookie(key) {
    if (document.cookie.length > 0) {
      const arr = document.cookie.split('; ')// 这里显示的格式需要切割一下自己可输出看下
      for (let i = 0; i < arr.length; i++) {
        const arr2 = arr[i].split('=')// 再次切割
        // 判断查找相对应的值
        if (arr2[0] === key) {
          return arr2[1]// 保存到保存数据的地方
        }
      }
    }
  },


  // 清除cookie
  clearCookie: function() {
    this.setCookie('', '', -1)// 修改2值都为空，天数为负1天就好了
  }
}

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

图形验证码参考