使用 cookie 实现记住密码功能

一、登陆页面

1.checkbox+button

<el-checkbox v-model="AccountForm.checked">记住密码</el-checkbox>

<el-button type="primary" style="width: 372px" @click="submitForm()">登录</el-button>

2.data

  data () {
    return {
      AccountForm: {
        userName: '',
        password: '',
        checked: true
      }
    }
  } 

3.mounted

  mounted () {
    this.getCookie()
  },

4.methods

  methods: {
    submitForm () {
      let that = this
      let userName = that.AccountForm.userName
      let password = that.AccountForm.password
      let checked = that.AccountForm.checked

      localStorage.setItem('userName', userNameData)
      localStorage.setItem('role', role)
      localStorage.setItem('userToken', token)

      // 判断记住密码的复选框是否被勾选，勾选则调用配置cookie方法
      if (checked === true) {
        // 传入账号名，密码，和保存天数3个参数
        // 将密码进行加密
        let CryptoJS = require('crypto-js')
        let ciphertext = CryptoJS.AES.encrypt(password, 'secret key 123').toString()
        console.log('加密密码:', ciphertext)
        // 将已加密密码保存在cookie中
        that.setCookie(userName, ciphertext, 7)
      } else {
        console.log('清空Cookie')
        // 清空Cookie
        that.clearCookie()
      }
    },

    // 设置cookie
    setCookie (saveName, savepwd, exdays) {
      let exDate = new Date() // 获取时间
      exDate.setTime(exDate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie = 'userName' + '=' + saveName + ';path=/;expires=' + exDate.toGMTString()
      window.document.cookie = 'userPwd' + '=' + savepwd + ';path=/;expires=' + exDate.toGMTString()
    },

    // 读取cookie
    getCookie () {
      if (document.cookie.length > 0) {
        let arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
        for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          if (arr2[0] === 'userName') {
            this.AccountForm.userName = arr2[1] // 保存到保存数据的地方
          } else if (arr2[0] === 'userPwd') {
            // 将cookie中的密码进行解密
            let CryptoJS = require('crypto-js')
            let bytes = CryptoJS.AES.decrypt(arr2[1], 'secret key 123')
            let originalText = bytes.toString(CryptoJS.enc.Utf8)
            console.log('解密密码：', originalText)
            // 将解密密码进行填充
            this.AccountForm.password = originalText
          }
        }
      }
    },

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

二、退出登录页面

1.button

<a @click="exitLoginFun">退出登录</a>

2.methods

exitLoginFun () {
  localStorage.removeItem('userName')
  localStorage.removeItem('role')
  localStorage.removeItem('userToken')
}

END