vue 中引入cryptoJS 關於CryptoJS中md5加密以及aes加密的隨筆 vue aliasConfig(模塊別名配置)

　　在搞前端開發的時候，頁面上有不少的地方是須要用戶輸入信息的，可是有些信息又很敏感，好比客戶的姓名、電話號碼、身份證號碼、銀行卡號及密碼等等這些，若是沒有進行加密處理，很容易被別人截取到，項目中應用到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）實際開發確定是先後端一塊兒的，因此先後端統一祕鑰進行加解密便可

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