crypto-js前端加密

安装

npm install crypto-js --save-dev
yarn add crypto-js --dev

demo(注代码不完整，只展示主要部分代码）

util.js

import CryptoJS from 'crypto-js'

/**
 * 加密

   * CipherOption, 加密的一些选项:
   *   mode: 加密模式, 可取值(CBC, CFB, CTR, CTRGladman, OFB, ECB), 都在 CryptoJS.mode 对象下
   *   padding: 填充方式, 可取值(Pkcs7, AnsiX923, Iso10126, Iso97971, ZeroPadding, NoPadding), 都在 CryptoJS.pad 对象下
   *   iv: 偏移量, mode === ECB 时, 不需要 iv
   *     返回的是一个加密对象
   */
const cryptoPassword = (password) => {
  const keyStr = '0CoJUm6QyszXcjud'
  //16位十六进制数作为密钥（秘钥为随机生成，必须与后端保持一致！）
  const key = CryptoJS.enc.Utf8.parse(keyStr)
  const srcs = CryptoJS.enc.Utf8.parse(password)
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
    //16位十六进制数作为密钥偏移量（秘钥为随机生成，必须与后端保持一致！）
    iv: CryptoJS.enc.Utf8.parse('ysdEw32sFDwszxcs'),
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}
// aes解密
const decrypt = (password) => {
  const encryptedHexStr = CryptoJS.enc.Utf8.parse(password);
  const srcs = CryptoJS.enc.Utf8.stringify(encryptedHexStr);
  const decrypt = CryptoJS.AES.decrypt(srcs, key, {
    iv: CryptoJS.enc.Utf8.parse('ysdEw32sFDwszxcs'),
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

export {
   cryptoPassword,
   decrypt  
}

index.vue

encodeURI(cryptoPassword(param.password))

<script setup>
import { ref} from 'vue'
import { cryptoPassword } from '@/utils/util'
const password = ref('')
const submitForm = async () => {
    password.value = encodeURI(cryptoPassword(param.password))
}
</script>