vue3 + crypto-jsの暗号化と復号化（通常バージョン/ TSバージョン）

序文：

        パスワードを暗号化および復号化するには、vueでcrypto-jsを使用します。

vue3:

1.インストール：

npm install crypto-js

2.カプセル化メソッドaes.js

import CryptoJS from 'crypto-js'

/**
 * AES 加密
 * @param word: 需要加密的文本
 * KEY: // 需要前后端保持一致
 * mode: ECB // 需要前后端保持一致
 * pad: Pkcs7 //前端 Pkcs7 对应 后端 Pkcs5
 */
const KEY = CryptoJS.enc.Utf8.parse('d7b85f6e214abcde')

export const AES_Encrypt = (plaintext) => {
  let ciphertext = CryptoJS.AES.encrypt(plaintext, KEY, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  }).toString()
  return ciphertext
}

/**
 * AES 解密
 * @param jsonStr
 */
export const AES_Decrypt = (jsonStr) => {
  let plaintext = CryptoJS.AES.decrypt(jsonStr, KEY, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  }).toString(CryptoJS.enc.Utf8)

  return plaintext
}

3.main.jsで導入

//全局密码加密
import { AES_Encrypt, AES_Decrypt } from '@/utils/aes.js'

app.config.globalProperties.$AES_Encrypt = AES_Encrypt //全局加密
app.config.globalProperties.$AES_Decrypt = AES_Decrypt //全局解密

4.ページで使用する

import { getCurrentInstance } from 'vue'

setup () {

        const { proxy } = getCurrentInstance()
        //加密
        let password = proxy.$AES_Encrypt(state.password)
}

vue3-Tsバージョン：

1.インストール：

npm install crypto-js
npm install --save @types/crypto-js