vue中使用jsencrypt实现数据RSA加密

一、安装第三方库-jsencrypt

npm install jsencrypt --save

二、引入jsencrypt

两种引入方式：全局引入和局部引入

// 1、全局引入在 main.js 文件中
 
import JSEncrypt from "jsencrypt"; 
Vue.prototype.jsEncrypt = JSEncrypt;
 
 
// 2、局部引入,在需要使用RSA加密的文件中
 
import JSEncrypt from 'jsencrypt'

三、在src/utils目录下，创建一个rsa.js文件

rsa.js

/* 使用局部引入的方式，引入jsencrypt实现数据RSA加密 */
import JSEncrypt from 'jsencrypt' // 处理长文本数据时报错 jsencrypt.js Message too long for RSA

//公钥key(这个需要前后台对应一下)
import { reqGetPublicKey } from '@/api/user'

async function getPublicKey() {
    try {
        let res = await reqGetPublicKey();
        const { data } = res;
        return data;
    } catch (err) {
        console.log('err>>>', err);
    }
}


export default {
    /* JSEncrypt加密 */
    async encryptCode(password) {
        let publicKey = await getPublicKey();
        console.log('rsa文件中的publicKey', publicKey)
        let jsencrypt = new JSEncrypt();
        //设置公钥 公钥是由后端返回的
        jsencrypt.setPublicKey(publicKey);
        // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
        let result = jsencrypt.encrypt(password);
        return result
    },

    decryptCode(password) {
        // 解密
        let decrypt = new JSEncrypt();
        //设置私钥  私钥也是从后端拿的
        decrypt.setPrivateKey('MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCAksaunGwnfe1f/NFjQBFk62yPTH7FAxKEibm6Ce9W8GKCtZ6kfqet2BJH4LhRN49F5zGc5d5rBWoZDEPB7nJxTys+4oWyGuG8EmRXm8UxZkAzPm3fqVSXZrDZiuTdWtkpS/es3I32n46KE/Gg7jOORAlQwMK2laEuwsmMHGURkXIkaV/8I0vwgWIGvLcDzElUGoyA0kZUcozL55LR9XodWXFNzessNuvSsYAG4a29XFff3e/zYnmc/66Y+L7jU47keZEPkAifVfwSGwZXeMLkJhsSh6A5csd72dw8qdmwvyfmEpwiKem0mLf+0qaghQ5UBVYwSippmLvtoxly/91JAgMBAAECggEAQLYfC5ktEj9eLtaXKIYBezLGo+UTVOMz+cM72DfR34cDfdgdbZtVl7jNkqG3AyGcmck//kDvzhueh9bVb5EsxnzbPj5Sng7LmJYFLNb4y+Ez5NbCBDU8nysPTZ6LjCGCdTeIA9fKF9u8qSBal+3rwunZamxqU+1Bf8CIIl3UPJ+pIOHD0Lu/m9kn4I+zteUtRnvZuf4HQ9Ooo9/qu1PQSizGSR9uWp+fHNGQYog9AXTldOlWcKQ4+ecaoS+dWJ1Q3EpweglI3iZSAkoqy5k8KxqeG4A1J4k6rQE8msjGMxIFRlBoOEDESq4v3lzp0CYGsaQwyK2lbJ2pUFwmtOpQkQKBgQDJO30nIDZMd21u369tcNozAwZKqIRqu0Xawvy2hZ9ExqPyhkeJfyfH33+rGefbpEqNfXuY5PsOVniDpHKvzHuktvb66aZgNRcVot+DBXz1P3SAGJKnnJC5jZ93Xox1tIoNG2m3M9JdFWoxGbzVbyZnDtGMfDZUIiD/NaOeiMnpnQKBgQCjkOWqlCOSRQStl4trMr9l6NLAefBTpfEz9ZaEE2mfMUbTeiQjRryoT+tIH3zwu740Q0V/QE1/+yzBK0i7/UP0EYdsabcwKztaId5RJYMirdqBN2QwwDlfeYRuIlzuTAlUUHitmtEtVdPtZDi3rII3S7MBLknKmrxmdDN8nTJ4nQKBgQCalcmByfwMZ944Qzu3Xe8xKsylg6kdeLmj4RBTgnikU9hUEZVY6cZ8g5PGtALqNt5SrSfKf3ThQcoYjrbPl80P7sHyZJU76OzP4SvEse2ZVOLBGJ9ohRykfkgXYhmSvlsi0IE4jGW4vh+ykmv+pgEhQD/3pN/zZ7hjdSg5PCmn/QKBgGfI2PGTbb6x7HX5Yo1ydd/EC3X16XgqIxJFEmxbpPlN2xL0vVlk2PAzRadN04ksl1OyG7bSplo+lfc777rYyPVk6fjwWzxFMjPOqbHzi3HFvo+fBgOo9L6P7Ge1hiHuPT0ykmAVjASoIQDQRuzEmRtc/QgSxt+3rzOTJ9g6JnxBAoGAMWRYx5k04p3N4RK+QCOaxh/Qs+/G7EdgdmmUBbJ2ARLC++Ip4EhM+bwi20FS1fvnHvnJaTpxFcgIPfdmaUmvIIFb57z2tXnl5SArlexX/14+p20C24y8xp1m23uItZqB1K4bW/aJHK9XgOBK6PRvGg2HtX1cXaw9paaw31SQYVQ=');
        let data = decrypt.decrypt(password);
        return data
    }


}

在页面中使用

<template>
  <div class="approvals-container">
    <div class="app-container">
      <h2>
        加密解密
      </h2>
    </div>
  </div>
</template>

<script>

import getKey from '@/utils/rsa'

export default {
  async created() {
    let res = await getKey.encryptCode('123456');
    console.log('加密过后的密码', res);
    let res2 = getKey.decryptCode(res)
    console.log('解码',res2);
  }
}
</script>