Vue项目中RSA公钥及Aes加解密问题

1.Vue项目中引入AES插件

(1)安装crypto-js

npm install crypto-js --save-dev

(2)封装aes工具类

import CryptoJS from 'crypto-js';

/**
 * 解密 这里使用的是CBC模式 必须要设置偏移量
 * @param {*} content 需要解密字符串
 * @param {*} key key
 * @param {*} iv 偏移量
 * @returns 
 */
function aesDecryptWithKeyAndIv(content, key, iv) {
    var encodeKey = CryptoJS.enc.Utf8.parse(iv);
    var encodeIv = CryptoJS.enc.Utf8.parse(iv);
    var decrypt = CryptoJS.AES.decrypt(content, encodeKey, {
        iv: encodeIv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    var decryptedStr = CryptoJS.enc.Utf8.stringify(decrypt);
    return decryptedStr.toString();
}

/**
 * 加密 这里使用的是CBC模式 必须要设置偏移量
 * @param {*} str 需要加密字符串
 * @param {*} key key
 * @param {*} iv 偏移量
 * @returns 
 */
function encryptDataWithKeyAndIv(str, key, iv) {
    var srcs = CryptoJS.enc.Utf8.parse(str);
    var encodeKey = CryptoJS.enc.Utf8.parse(key);
    var encodeIv = CryptoJS.enc.Utf8.parse(iv);
    var encrypted = CryptoJS.AES.encrypt(srcs, encodeKey, {
        iv: encodeIv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
};

export default {
    aesDecryptWithKeyAndIv: aesDecryptWithKeyAndIv,
    encryptDataWithKeyAndIv: encryptDataWithKeyAndIv
};

(3)在需要使用的页面中引入工具类,即可使用,如:

import aes from "@/utils/aes.js"; 

import { aesDecryptWithKeyAndIv, encryptDataWithKeyAndIv } from "@/utils/aes.js"; 

2.Vue中引入RSA加密插件

(1)安装jsencrypt

npm i jsencrypt

(2)封装RSA工具类,(ps:目前rsa插件提供的方法只有公钥加密,私钥解密,但项目中实际想要的方法是公钥解密,所有公钥解密要自己改动下)

import JSEncrypt from 'jsencrypt';
import { parseBigInt } from 'jsencrypt/lib/lib/jsbn/jsbn';
//私钥
let privateKey = ``;
const encryptor = new JSEncrypt();

/**
 * 公钥--RSA加密
 * @param {*} word 需要加密的字符串
 * @param {*} publicKey 公钥
 * @returns 
 */
export function rsa_encrypt(word, publicKey) {
    publicKey = `-----BEGIN PUBLIC KEY-----\n${publicKey}\n-----END PUBLIC KEY-----`;
    encryptor.setPublicKey(publicKey);
    return encryptor.encrypt(word);
}

/**
 * RSA解密(私钥解密)
 * @param {*} word 需要解密的字符串
 * @param {*} privateKey 私钥
 * @returns 
 */
export function rsa_decrypt(word,privateKey) {
    privateKey = `-----BEGIN RSA PRIVATE KEY-----\n${word}\n-----END RSA PRIVATE KEY-----`;
    encryptor.setPrivateKey(privateKey);
    return encryptor.decrypt(word);
}

/**
 * RSA解密(公钥解密)
 * @param {*} data 需要解密的字符串
 * @param {*} publicKey 公钥
 * @returns 
 */
function decrypt(data, publicKey) {
    const encrypt = new JSEncrypt()
    encrypt.setPublicKey(publicKey)
    // 不支持公钥解密
    // 自定义解析方法支持公钥解析
    const rsaKey = encrypt.getKey()
    rsaKey.decrypt = function (ctext) {
        var c = parseBigInt(ctext, 16)
        var m = this.doPublic(c)
        if (m == null) {
            return null
        }
        return pkcs1unpad2(m, (this.n.bitLength() + 7) >> 3)
    }
    return encrypt.decrypt(data)
}

function pkcs1unpad2(d, n) {
    var b = d.toByteArray()
    var i = 0
    while (i < b.length && b[i] === 0) {
        ++i
    }
    ++i
    while (b[i] !== 0) {
        if (++i >= b.length) {
            return null
        }
    }
    var ret = ''
    while (++i < b.length) {
        var c = b[i] & 255
        if (c < 128) { // utf-8 decode
            ret += String.fromCharCode(c)
        } else if ((c > 191) && (c < 224)) {
            ret += String.fromCharCode(((c & 31) << 6) | (b[i + 1] & 63))
            ++i
        } else {
            ret += String.fromCharCode(((c & 15) << 12) | ((b[i + 1] & 63) << 6) | (b[i + 2] & 63))
            i += 2
        }
    }
    return ret
}

export default {
    rsa_encrypt: rsa_encrypt,
    rsa_decrypt: rsa_decrypt,
    decrypt: decrypt,
};

(3)在需要使用的页面中引入工具类,即可使用,如:

import jsencrypt from "@/utils/jsencrypt.js";

import { rsa_encrypt, rsa_decrypt, decrypt }from "@/utils/jsencrypt.js";

### Vue 中实现 RSA 加密和解密的方法 #### 1. 环境准备与依赖安装 为了在 Vue 项目中实现 RSA加密功能,可以借助 `jsencrypt` 库来完成。以下是具体的准备工作: - **安装依赖** 对于基于 Vue2 或 Vue3 的项目,可以通过以下命令安装所需的库: ```bash npm install jsencrypt --save ``` - **全局引入(可选)** 如果希望在整个应用中都可以方便地调用加密工具,则可以在项目的入口文件中进行配置。例如,在 Vue2 的 `main.js` 文件中: ```javascript import Vue from 'vue'; import JSEncrypt from 'jsencrypt'; Vue.prototype.$encrypt = new JSEncrypt(); ``` 对于 TypeScript 支持的 Vue3 项目,也可以按照类似的逻辑设置全局变量。 --- #### 2. 前端 RSA 加密实现 前端主要负责使用公钥对数据进行加密处理。以下是具体实现方式: ```javascript // 导入 JSEncrypt 类 import JSEncrypt from 'jsencrypt'; function encryptData(publicKey, data) { const crypt = new JSEncrypt(); // 创建实例 crypt.setPublicKey(publicKey); // 设置公钥 return crypt.encrypt(data); // 执行加密并返回结果 } export default encryptData; ``` 上述函数接受两个参数:一个是后端提供的公钥字符串 `publicKey`,另一个是要加密的数据 `data`。最终会返回经过 Base64 编码的加密串[^2]。 需要注意的是,如果要加密的内容长度较长,可能需要分段加密以满足 RSA 的最大输入限制[^4]。 --- #### 3. 后端 Flask 实现 RSA 解密 后端部分通常由 Python 提供支持,这里以 Flask 框架为例展示如何对接收到的加密数据进行解密操作。 首先确保已安装必要的库: ```bash pip install pycryptodome ``` 接着编写如下代码片段用于解密: ```python from Crypto.PublicKey import RSA from Crypto.Cipher import PKCS1_v1_5 import base64 def decrypt_data(private_key, encrypted_data): rsakey = RSA.importKey(private_key.encode()) # 导入私钥 cipher = PKCS1_v1_5.new(rsakey) # 初始化解密对象 decrypted_text = cipher.decrypt(base64.b64decode(encrypted_data), None).decode('utf-8') return decrypted_text ``` 此函数接收两个参数——私钥字符串 `private_key` 和来自前端加密数据 `encrypted_data`,并通过指定算法完成解密过程[^1]。 --- #### 4. AES+RSA 混合加密方案简介 虽然单独使用 RSA 可以解决安全性需求,但由于其性能较低以及存在明文大小限制等问题,实际开发中更倾向于采用 AES-RSA 组合的方式。即先利用随机生成的对称秘钥对大数据量内容做快速加密,再把该临时秘钥本身交给 RSA 处理传输至服务端[^3]。 这种方式既兼顾效率又保障了通信链路中的隐私保护能力。 --- ### 注意事项 - 公钥/私钥应妥善保管,切勿暴露在外网环境中。 - 当涉及敏感信息时务必启用 HTTPS 协议防止中间人攻击。 - 若需兼容移动端设备或者老版本浏览器,请测试目标平台是否完全支持所选用的技术栈。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值