vue 登录时记住密码 + 加密

Posted 2021-10-27 奥特曼　

思路 登录成功时  记录选中记住密码状态 到localstorage， 账号密码 加密后存到cookie。

npm i npm install crypto-js 

import CryptoJS from 'crypto-js'
export default {
  data () {
    return {
      loginForm: {
        account: '',
        password: ''
      },
      rememberPassword: false
    }
  },
  created () {
    this.getCookiePassword()
    if (localStorage.getItem('rememberPsw') === 'true') {
      this.rememberPassword = true
      this.getCookie()
    }
  },
  methods: {
    getCookiePassword () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split(';') // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          console.log(unescape(arr2[1]))
        }
      }
    },
    // 登录
    post () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          console.log('成功')
          this.getLogin()
        } else {
          this.$message({
            showClose: true,
            message: '请确认账号密码后再登陆！',
            type: 'warning'
          })
        }
      })
    },
    async getLogin () {
      try {
        const res = await this.$store.dispatch('login/userLogin', this.loginForm)
        // 记住密码
        if (this.rememberPassword) {
          this.setCookie(this.loginForm.account, this.loginForm.password, 7)
        } else {
          this.clearCookie()
        }
        // 保存记住密码状态
        localStorage.setItem('rememberPsw', this.rememberPassword)
        this.$message({ showClose: true, message: res.msg, type: 'success' })
        res.data.userinfo.group_id === 3 ? this.$router.push('/consultantManagement') : this.$router.push('/')
      } catch (err) {
        this.$message({ showClose: true, message: err.message, type: 'error' })
      }
    },
    rememberAccountNumber (name, value, day) {
      console.log(name, value, day)
      const Days = day
      const exp = new Date()
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
      document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
    },
    // 设置cookie
    setCookie (portId, psw, exdays) {
      // Encrypt，加密账号密码
      var cipherPortId = CryptoJS.AES.encrypt(
        portId + '',
        'secretkey123'
      ).toString()
      var cipherPsw = CryptoJS.AES.encrypt(psw + '', 'secretkey123').toString()
      console.log(cipherPortId + '/' + cipherPsw)// 打印一下看看有没有加密成功

      var exdate = new Date() // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      // 字符串拼接cookie，为什么这里用了==，因为加密后的字符串也有个=号，影响下面getcookie的字符串切割，你也可以使用更炫酷的符号。
      window.document.cookie =
    'currentPortId' +
    '==' +
    cipherPortId +
    ';path=/;expires=' +
    exdate.toGMTString()
      window.document.cookie =
    'password' +
    '==' +
    cipherPsw +
    ';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] === ' currentPortId') {
            // Decrypt，将解密后的内容赋值给账号
            const bytes = CryptoJS.AES.decrypt(arr2[1], 'secretkey123')
            this.loginForm.account = bytes.toString(CryptoJS.enc.Utf8)
          } else if (arr2[0] === ' password') {
            // Decrypt，将解密后的内容赋值给密码
            const bytes = CryptoJS.AES.decrypt(arr2[1], 'secretkey123')
            this.loginForm.password = bytes.toString(CryptoJS.enc.Utf8)
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1)
    }
  }
}
</script>