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