关于RSA和AES加密

RSA非对称加密

非对称加密不能传输大数据量,但比对称加密要安全,所以传输密码一般就是用的非对称加密

接口拿到RSA公钥然后再加密之后传给后端就好了

javascript 复制代码
let crypt = new JSEncrypt();
crypt.setPublicKey(res.message);
// console.log('加密前:', data);
let encryptedPassword = crypt.encrypt(JSON.stringify(data));

AES对称加密

适合加密大量数据,加密和解密使用相同的密钥。

本地生成公钥传给后端,后端传私钥回来,vi就是取

javascript 复制代码
import { encrypt, decrypt } from '@/utils/crypto'
import JSEncrypt from 'jsencrypt';//非对称加密方法
import CryptoJS from "crypto-js";//对称加密方法

let crypt = new JSEncrypt({default_key_size: 1024})
let publicKey = crypt.getPublicKey()
let privateKey = crypt.getPrivateKey()
javascript 复制代码
if (response.code === 200) {
     crypt.setPrivateKey(privateKey)
     let ty = response.data;
     const decryptedStr = crypt.decrypt(ty);
     const list = JSON.parse(decryptedStr);
     console.log('list:', list)
     // 拿到开关配置
     isEncrypt = list?.encrypt === '1';
     console.log('数据加密已', isEncrypt ? '开启' : '关闭');
     const keyStr = (list?.key || '').trim();// 强制转换为字符串并去除前后空格
     rawKey = CryptoJS.enc.Utf8.parse(keyStr)
     console.log('私钥:', rawKey)
}

AES加密

javascript 复制代码
const encryptedData = encrypt(jsonData,rawKey); // 使用crypto-js加密
config.data = { data:encryptedData }; // 将加密后的数据作为请求体发送

AES解密

javascript 复制代码
const decryptedData = decrypt(res.data,rawKey);
res.data = JSON.parse(decryptedData);

crypto.js

javascript 复制代码
import CryptoJS from 'crypto-js';

// 从环境变量获取密钥和初始化向量
/*const rawKey = import.meta.env.VITE_APP_CRYPTO_KEY; //密钥
const key = CryptoJS.enc.Utf8.parse(rawKey);*/

// 加密
export function encrypt(message,key) {
    const iv = CryptoJS.lib.WordArray.random(16) // 生成16字节随机IV
    const encrypted = CryptoJS.AES.encrypt(message, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    })
    // 将IV与密文拼接(IV在前)
    return iv.concat(encrypted.ciphertext).toString(CryptoJS.enc.Base64)
}
// 解密
export function decrypt(ciphertext,key) {
    // 从Base64解码
    const ciphertextBytes = CryptoJS.enc.Base64.parse(ciphertext)
    // 提取前16字节作为IV
    const iv = CryptoJS.lib.WordArray.create(ciphertextBytes.words.slice(0, 4))
    // 剩余部分是实际密文
    const encrypted = CryptoJS.lib.WordArray.create(ciphertextBytes.words.slice(4))
    const decrypted = CryptoJS.AES.decrypt(
        { ciphertext: encrypted },
        key,
        {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        }
    )
    return decrypted.toString(CryptoJS.enc.Utf8)
}
相关推荐
liangshanbo12154 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD6 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15888 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫8 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo8 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li8 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐8 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊10 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php