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.js,前端)