Vue3安全新防线：RSA加密密码的实现与优化指南

2025/5/23 0:45:16 来源：https://blog.csdn.net/Html_vueJs/article/details/146085673 浏览: 次关键词：Vue3安全新防线：RSA加密密码的实现与优化指南

引言

在数据安全日益受到重视的今天，前端加密技术已成为保护用户敏感信息（如密码、身份证号）的"最后防线"。本文将系统解析如何在Vue3项目中通过扩展JSEncrypt库实现RSA长文本加密，并结合TypeScript构建类型安全的加密工具类，同时提供完整的代码实现与实战建议。

一、环境准备与库引入

1. 安装依赖

npm install jsencrypt --save
npm install typescript @types/jsencrypt --save-dev

2. 全局引入（推荐）

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import JSEncrypt from 'jsencrypt'const app = createApp(App)
app.config.globalProperties.$encrypt = new JSEncrypt()
app.mount('#app')

二、核心加密方法解析

1. 分段加密原理

RSA加密存在117字节长度限制（PKCS#1 v1.5填充模式），超过限制需分段处理。通过计算字符编码长度动态截取字符串，确保每段加密后总长度不超过限制。

// 分段加密实现
JSEncrypt.prototype.encryptLong = function (str: string): string | boolean {const key = this.getKey()let ct = ''const bytes = []let byteNo = 0// 计算分段点for (let i = 0; i < str.length; i++) {const c = str.charCodeAt(i)if (c >= 0x010000) byteNo += 4else if (c >= 0x000800) byteNo += 3else if (c >= 0x000080) byteNo += 2else byteNo += 1if ((byteNo % 117) >= 114 || byteNo === 0) {bytes.push(i)byteNo = 0}}// 分段加密for (let i = 0; i < bytes.length - 1; i++) {const start = bytes[i] + 1const end = bytes[i + 1] + 1ct += key.encrypt(str.substring(start, end))}// 处理最后一段if (bytes[bytes.length - 1] !== str.length - 1) {ct += key.encrypt(str.substring(bytes[bytes.length - 1] + 1))}return bytesToHex(ct)
}

三、工具类封装方案

1. 类型安全工具类

// src/utils/rsa.ts
import { JSEncrypt } from 'jsencrypt'export class RSAUtil {private encryptor: JSEncryptconstructor() {this.encryptor = new JSEncrypt()}/*** 加密密码（自动处理分段）* @param password 明文密码* @param publicKey 公钥*/encrypt(password: string, publicKey: string): string {this.encryptor.setPublicKey(publicKey)const encrypted = this.encryptor.encryptLong(password)return arrayBufferToBase64(encrypted)}/*** 解密密码（自动处理分段）* @param encrypted 密文* @param privateKey 私钥*/decrypt(encrypted: string, privateKey: string): string | null {this.encryptor.setPrivateKey(privateKey)const decrypted = this.encryptor.decryptLong(base64ToArrayBuffer(encrypted))return decrypted?.replace(/\+/g, ' ')}
}

四、实战使用示例

<template><div><input v-model="password" placeholder="输入密码" type="password"><button @click="handleEncrypt">加密</button><p>加密结果：{{ encryptedPassword }}</p></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import RSAUtil from '@/utils/rsa'const password = ref('')
const encryptedPassword = ref('')
const rsaUtil = new RSAUtil()const handleEncrypt = () => {const publicKey = `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8kGa1pSjbSYZVebtTRBLxBz5H
4i2p/llLCrEeQhta5kaQu/RnvuER4W8oDH3+3iuIYW4VQAzyqFpwuzjkDI+17t5t
0tyazyZ8JXw+KgXTxldMPEL95+qVhgXvwtihXC1c5oGbRlEDvDF6Sa53rcFVsYJ4
ehde/zUxo6UvS7UrBQIDAQAB-----END PUBLIC KEY-----`encryptedPassword.value = rsaUtil.encrypt(password.value, publicKey)
}
</script>