vue 中引入cryptoJS

　　在搞前端開發的時候，頁面上有很多的地方是需要用戶輸入信息的，但是有些信息又很敏感，比如客戶的姓名、電話號碼、身份證號碼、銀行卡號及密碼等等這些，如果沒有進行加密處理，很容易被別人截取到，項目中應用到cryptoJS的AES模式加密，然后自己就抽空研究了下，下面是學習的過程

參考文章：

 

關於CryptoJS中md5加密以及aes加密的隨筆

前后端AES加密解密,前端使用CryptoJS,后端Java實現

如何使用CryptoJS的AES方法進行加密和解密

 

（一）通過cnpm或者npm引入cryptoJS

　　npm install crypto-js --save-dev或cnpm install crypto-js --save-dev

（二）在src文件夾下創建一個叫tools的文件夾，然后在tools下創建一個js文件，這里我直接叫jiami.js了（簡單粗暴點），目錄結構如下：

（三）實現AES加密解密方法

①先引入cryptoJS

　　import cryptoJs from 'crypto-js'

②添加加密解密方法並將它們暴露出來，方便引入，代碼如下：

'use strict'

import cryptoJs from 'crypto-js'
let keyOne = '313233343536373a'

export default {
  // 加密函數
  jiami (word) {
    console.log(word)
    console.log('秘鑰長度為：', keyOne.length)
    let key = cryptoJs.enc.Hex.parse(keyOne)
    let enc = ''
    if (typeof word === 'string') {
      enc = cryptoJs.AES.encrypt(word, key, {
        // iv: iv
        mode: cryptoJs.mode.ECB,
        padding: cryptoJs.pad.Pkcs7
      })
    } else if (typeof word === 'object') {
      let data = JSON.stringify(word)
      enc = cryptoJs.AES.encrypt(data, key, {
        // iv: iv
        mode: cryptoJs.mode.ECB,
        padding: cryptoJs.pad.Pkcs7
      })
    }
    let encResult = enc.ciphertext.toString()
    return encResult
  },
  // 解密函數
  jiemi (word) {
    console.log('傳入的密文：', word)
    let key = cryptoJs.enc.Hex.parse(keyOne)
    let dec = cryptoJs.AES.decrypt(cryptoJs.format.Hex.parse(word), key, {
      // vi: vi
      mode: cryptoJs.mode.ECB,
      padding: cryptoJs.pad.Pkcs7
    })
    let decData = cryptoJs.enc.Utf8.stringify(dec)
    return decData
  }
}

（四）引入加密解密方法

　　在需要的組件中，引入加密文件即可，這里我是通過別名配置的方法引入進來的，別名配置在另一篇隨筆（vue aliasConfig(模塊別名配置)）中有說明，引入如下：

　　import jm from 'jm'

　　然后通過jm.jiami和jm.jiemi即可調用jiami.js中的加密和解密方法了，下面放一張效果圖：

 

 

　注意的地方有幾點：（1）加密的秘鑰的長度必須是8的整數倍，如果不是，解碼的結果為空，這里我還沒理解，后面再慢慢學了；（2）我們加密的可能會是字符串或者一個對象，所以加密時得做判斷先，方法已經寫好了，注意下就行了；（3）實際開發肯定是前后端一起的，所以前后端統一秘鑰進行加解密即可

　總結：這是我根據項目中鵬哥寫好的應用和網上參考了很多方法后的一種實現方法，看了好多大佬的文章，發現還有許多的加密方式，等后續有空了再慢慢多學習補充下了...