【VUE】17、使用JSEncrypt对数据加解密

在 Web 开发中，数据安全是至关重要的环节。当涉及用户密码、身份证号等敏感信息的传输时，仅仅依赖 HTTPS 可能还不够------在金融、政务等高安全场景中，通常需要在应用层再做一次加密，以防止中间人攻击或内网抓包导致的数据泄露。

RSA 是一种非对称加密算法，它使用一对密钥：公钥加密、私钥解密。前端持有公钥进行加密，后端持有私钥进行解密，即使请求被截获，攻击者也无法还原明文数据。

1、关于 JSEncrypt

JSEncrypt 是一个基于 JavaScript 实现的 RSA 加密库，专为浏览器环境设计，提供了简单易用的 API。它的核心特点：

轻量简洁：API 只有几个核心方法，学习成本低
开箱即用：无需复杂的依赖配置
支持标准 PEM 格式：可与后端（Java、Python、PHP、Node.js）无缝对接

2、安装

使用 npm 安装

bash 复制代码

npm install jsencrypt --save

使用 yarn 安装

bash 复制代码

yarn add jsencrypt

3、使用 JSEncrypt

javascript 复制代码

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)
}

4、生成公/私钥

生成公/私钥，点击生成密钥对，将生成的公钥、私钥复制到 js 文件中即可。

⚠️ 注意：公钥的格式必须完整包含 -----BEGIN PUBLIC KEY----- 和 -----END PUBLIC KEY----- 标记，否则加密会失败。

5、注意事项

将公钥写死在代码中虽然简单，但存在两个问题：

公钥泄露后无法及时更换
无法实现密钥轮换

最佳实践是在应用启动时或进入登录页时，从后端动态获取公钥。

在 main.js 或 App.vue 中初始化：

javascript 复制代码

// 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()

6、常见问题

加密返回 null

原因一：公钥格式不正确

确保公钥包含了正确的头尾标识：

text 复制代码

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

原因二：待加密的数据过长

RSA 加密有长度限制（密钥长度 1024 位时，最多加密 117 字节；2048 位时最多 245 字节）。如果遇到超长内容需要加密，可以考虑：

对长文本使用 AES 对称加密，再用 RSA 加密 AES 密钥（混合加密方案）
或使用分段加密方案

Vue 3 中的使用差异

在 Vue 3 中，使用方式和 Vue 2 基本相同，唯一的区别是 Composition API 的写法：

html 复制代码

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

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

TypeScript 支持

如果项目使用 TypeScript，可以安装类型定义：

bash 复制代码

npm install @types/jsencrypt --save-dev

7、安全性建议

必须使用 HTTPS：即使做了应用层加密，HTTPS 仍然是传输安全的基础
公钥动态获取：避免将公钥写死在前端代码中，通过接口动态获取
定期轮换密钥：后端定期生成新的密钥对，降低密钥泄露风险
配合验证码机制：防止暴力破解攻击
前端只加密，不解密：私钥只保存在服务端，前端永远不应该持有私钥

如您在阅读中发现不足，欢迎留言！！！