Vue使用JSEncrypt对数据加解密的步骤详解

npm install jsencrypt --save

yarn add jsencrypt

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

const publicKey = 'xxxx';

const privateKey = 'xxxx';

// 加密
export function encrypt(txt) {
  if (!txt) {
    return txt;
  }
  const encryptor = new JSEncrypt()
  // 设置公钥
  encryptor.setPublicKey(publicKey)
  // 对数据进行加密
  return encryptor.encrypt(txt)
}

// 解密
export function decrypt(txt) {
  if (!txt) {
    return txt;
  }
  const encryptor = new JSEncrypt()
  // 设置私钥
  encryptor.setPrivateKey(privateKey)
  // 对数据进行解密
  return encryptor.decrypt(txt)
}

// main.js
import { setPublicKey } from '@/utils/rsaEncrypt'
import axios from 'axios'

// 应用启动时获取公钥
async function initRSA() {
  try {
    const response = await axios.get('/api/public-key')
    if (response.data.code === 200) {
      setPublicKey(response.data.publicKey)
      console.log('RSA 公钥初始化成功')
    }
  } catch (error) {
    console.error('获取公钥失败', error)
  }
}

initRSA()

-----BEGIN PUBLIC KEY-----
（公钥内容）
-----END PUBLIC KEY-----

<script setup>
import { ref } from 'vue'
import { encrypt } from '@/utils/rsaEncrypt'

const password = ref('')
const encryptedPwd = encrypt(password.value)
</script>

npm install @types/jsencrypt --save-dev