需求概況

要求實現登錄功能，包含記住密碼

基本實現原理

傳輸給后端字段采用MD5加密，記住密碼的狀態存放在localStorage中，密碼采用encrypt加密后存放在cookie中，需要用時在cookie獲取密碼解密后使用

準備工作

下載依賴包crypto-js

    //  如果沒有安裝淘寶鏡像先安裝淘寶鏡像
    //   npm install -g cnpm --registry=http://registry.npm.taobao.org/
    cnpm install crypto-js --save-dev

上代碼

1. 在vuex中先儲存秘鑰uid

export default new Vuex.Store({
  state: {
    uid: 'xxxxx'
  }
})

2. 封裝加密解密及存儲獲取的encryption.js

import CryptoJS from "crypto-js"
import store from "@/store"

export function setCookie(portId, psw, exdays) {
  // Encrypt，加密賬號密碼
  let cipherPortId = CryptoJS.AES.encrypt(portId+'', store.state.uid).toString()
  let cipherPsw = CryptoJS.AES.encrypt(psw+'', store.state.uid).toString()
  // console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有沒有加密成功

  let exdate = new Date() //獲取時間
  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) //保存的天數
  //字符串拼接cookie，為什么這里用了==，因為加密后的字符串也有個=號，影響下面getcookie的字符串切割，你也可以使用更炫酷的符號。
  window.document.cookie = "username" + "==" + cipherPortId + ";path=/;expires=" + exdate.toGMTString()
  window.document.cookie = "password" + "==" + cipherPsw + ";path=/;expires=" + exdate.toGMTString()
}
//讀取cookie
export function getCookie () {
  let userInfo = {
    username: '',
    password: ''
  }
  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") {
        // Decrypt，將解密后的內容賦值給賬號
        let bytes = CryptoJS.AES.decrypt(arr2[1], store.state.uid)
        userInfo.username = bytes.toString(CryptoJS.enc.Utf8);
      } else if (arr2[0] == "password") {
        // Decrypt，將解密后的內容賦值給密碼
        let bytes = CryptoJS.AES.decrypt(arr2[1], store.state.uid)
        userInfo.password = bytes.toString(CryptoJS.enc.Utf8)
      }
    }
  }
  return userInfo
}

//清除cookie
export function clearCookie () {
  setCookie('', '', -1)
}

3. login.vue頁面內使用封裝好了的encryption.js

<script>
//  先引入encryption.js和crypto-js
import CryptoJS from "crypto-js"
import { setCookie, getCookie, clearCookie } from '@/utils/encryption'
export default {
  data() {
    return {
      userInfo: {
        username: '',
        password: ''
      },
      isActive: false
    };
  },
  created(){
    if (JSON.parse(localStorage.getItem('rememberPsw'))) {
      this.isActive = JSON.parse(localStorage.getItem('rememberPsw'))
      this.userInfo = getCookie()
    } else{
      this.userInfo = {
        username: '',
        password: ''
      }
      this.isActive = false
    }
  }
  methods: {
    handlerSubmitBtn() {
        // 提交表單后給后臺，密碼進行MD5加密后傳輸進行驗證是否正確
      login(this.userInfo.username, CryptoJS.MD5(this.userInfo.password).toString(), this.isActive).then(res => {
        const resp = res.data;
        // 登錄驗證成功
        if (resp.flag) {
          if (this.isActive) {
            localStorage.setItem('rememberPsw', JSON.stringify(this.isActive))
            setCookie(this.userInfo.username, this.userInfo.password, 30)
          } else {
            localStorage.removeItem('rememberPsw')
            clearCookie()
          }
          this.$router.push({
            path:"/home"
          })
        } else {
          // 登陸驗證失敗
          this.$message({
            message: resp.message,
            type: "warning"
          });
        }
      })
    }
  }
}
</script>

結束語

crypto.js中還有一些加密解密用法，如果有不懂的，可以參考一下 cryptojs官方api