VUE專案 AES加解密（小白版）

 

1.安裝（執行以下命令）

npm install crypto-js --save-dev

執行結果：

2，在util資料夾下 建立 aes.js

import CryptoJS from 'crypto-js'

export default {
  // 隨機生成指定數量的16進位制key
  generatekey(num) {
    var library = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    let key = ''
    for (var i = 0; i < num; i++) {
      var randomPoz = Math.floor(Math.random() * library.length)
      key += library.substring(randomPoz, randomPoz + 1)
    }
    return key
  },

  // 加密
  encrypt(word, keyStr) {
    // keyStr = 'abcdsxyzhkj12345' // 判斷是否存在ksy，不存在就用定義好的key
    var key = CryptoJS.enc.Utf8.parse(keyStr)
    var srcs = CryptoJS.enc.Utf8.parse(word)
    var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    return encrypted.toString()
  },
  // 解密
  decrypt(word, keyStr) {
    // keyStr = 'abcdsxyzhkj12345'
    var key = CryptoJS.enc.Utf8.parse(keyStr)
    var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    return CryptoJS.enc.Utf8.stringify(decrypt).toString()
  }

}

3.在專案使用

import AES from '@/utils/aes.js'

// 如果是物件/陣列的話，需要先JSON.stringify轉換成字串
this.aesMStr = AES.encrypt(this.aseStr, this.aesKey) // 加密
this.aesJStr = AES.decrypt(this.aesMStr, this.aesKey) // 解密

完整頁面程式碼如下：

<template>
  <div class="aes-container">
    <van-row>
      <van-col span="24">
        <img src="../../assets/img/demo/aes/aescrypt_header.png" height="100" width="100%"/>
        <van-cell-group>
          <van-field label="aesKey" v-model="aesKey" value="" readonly />
        </van-cell-group>
        <van-field v-model="aseStr" rows="2" autosize label="加密前資料" type="textarea" maxlength="50" placeholder="請輸入……" show-word-limit @input="aseStrChonge()"></van-field>
        <van-field v-model="aesMStr" rows="2" autosize label="加密後密文" type="textarea" placeholder="請輸入……" show-word-limit ></van-field>
        <van-field v-model="aesJStr" rows="2" autosize label="解密後資料" type="textarea" placeholder="請輸入……" show-word-limit></van-field>
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
          每次頁面開啟隨機獲取16位加密Key(專案使用時請固定)
        </van-notice-bar>
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
          如果是物件/陣列的話，需要先JSON.stringify轉換成字串
        </van-notice-bar>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import AES from '@/utils/aes.js'
export default {
  data() { // 定義資料
    return {
      aseStr: '', // aes 加密前資料
      aesKey: '', // aes 加密key
      aesMStr: '', // aes 加密後資料
      aesJStr: '' // aes 解密後資料
    }
  },
  mounted() { // 此時已經將編譯好的模板，掛載到了頁面指定的容器中顯示
    this.aesKey = AES.generatekey(16) // 隨機獲取16位加密Key
  },
  methods: { // 定義方法
    aseStrChonge() {
      // 如果是物件/陣列的話，需要先JSON.stringify轉換成字串
      this.aesMStr = AES.encrypt(this.aseStr, this.aesKey) // 加密
      this.aesJStr = AES.decrypt(this.aesMStr, this.aesKey) // 解密
    }
  },
  filters: {}, // 定義私有過濾器
  directives: {}, // 定義私有指令
  components: {}, // 定義例項內部私有元件的
  beforeCreate() { }, // 例項剛在記憶體中被建立出來，此時，還沒有初始化好 data 和 methods 屬性
  created() { }, // 例項已經在記憶體中建立OK，此時data和methods已經建立OK，此時還沒有開始編譯模板
  beforeMount() { }, // 此時已經完成了模板的編譯，但是還沒有掛載到頁面中
  beforeUpdate() { }, // 狀態更新之前執行此函式， 此時 data 中的狀態值是最新的，但是介面上顯示的 資料還是舊的，因為此時還沒有開始重新渲染DOM節點
  updated() { }, // 例項更新完畢之後呼叫此函式，此時 data 中的狀態值 和 介面上顯示的資料，都已經完成了更新，介面已經被重新渲染好了！
  beforeDestroy() { }, // 例項銷燬之前呼叫。在這一步，例項仍然完全可用。
  destroyed() { } // Vue例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
}

</script>