uniapp中使用RSA加密

在uni-app中使用RSA加密可以通过JavaScript库来实现。由于uni-app是基于Vue.js的跨平台框架，你可以使用适用于JavaScript的RSA加密库，比如node-forge或者jsencrypt或者wxmp-rsa。本文主要介绍jsencrypt和wxmp-rsa，我自己项目用的wxmp-rsa，至于为什么会用后面会说！

1. 安装jsencrypt
   首先，需要在你的uni-app项目中安装jsencrypt库。你可以使用npm或者yarn来安装这个库。

使用npm：

npm install jsencrypt

使用yarn：

yarn add jsencrypt

2. 使用jsencrypt进行RSA加密
   安装完成后，你可以在你的uni-app项目中使用jsencrypt进行RSA加密。以下是一个示例代码：
   首先，在你的uni-app项目中创建一个公共的JavaScript模块，例如crypto.js，用于封装加密和解密的逻辑。

在你的项目的/common目录下创建crypto.js文件，并添加以下代码：

// common/crypto.js
import JSEncrypt from 'jsencrypt';

// 示例：公钥和私钥（实际使用中，请替换为你的密钥）
const publicKey = `-----BEGIN PUBLIC KEY-----
YOUR_PUBLIC_KEY_HERE
-----END PUBLIC KEY-----`;

const privateKey = `-----BEGIN PRIVATE KEY-----
YOUR_PRIVATE_KEY_HERE
-----END PRIVATE KEY-----`;

/**
 * 加密函数
 * @param {string} data - 要加密的数据
 * @returns {string} - 加密后的数据
 */
export function encryptData(data) {
  const encryptor = new JSEncrypt();
  encryptor.setPublicKey(publicKey);
  return encryptor.encrypt(data);
}

/**
 * 解密函数
 * @param {string} encryptedData - 要解密的数据
 * @returns {string} - 解密后的数据
 */
export function decryptData(encryptedData) {
  const decryptor = new JSEncrypt();
  decryptor.setPrivateKey(privateKey);
  return decryptor.decrypt(encryptedData);
}

3. 将代码集成到uni-app项目中
   在需要使用加密功能的页面中，引入并使用刚才创建的加密模块。假设在pages/index/index.vue页面中调用加密和解密功能：

<template>
  <view>
    <button @click="handleEncrypt">Encrypt Data</button>
    <button @click="handleDecrypt">Decrypt Data</button>
    <text>Encrypted: {{ encrypted }}</text>
    <text>Decrypted: {{ decrypted }}</text>
  </view>
</template>

<script>
import { encryptData, decryptData } from '@/common/crypto.js';

export default {
  data() {
    return {
      data: "Hello, RSA!",
      encrypted: '',
      decrypted: ''
    };
  },
  methods: {
    handleEncrypt() {
      this.encrypted = encryptData(this.data);
    },
    handleDecrypt() {
      this.decrypted = decryptData(this.encrypted);
    }
  }
};
</script>

<style>
/* 你的样式代码 */
</style>

使用wxmp-rsa
下载方式和上诉基本相同不在赘述
在 common/crypto.js 文件中：

import WxmpRsa from 'wxmp-rsa';

// 公钥
const publicKey =
    `MIGfMA0GCSqGSIb3DQEBAQUAA`;//这里要替换成自己项目的

// 私钥
const privateKey =
    `MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdA`; //这里要替换成自己项目的

export function encryptData(data) {
    const encryptor = new WxmpRsa();
    encryptor.setPublicKey(publicKey);
    return encryptor.encryptLong(JSON.stringify(data)).toString();
}

export function decryptData(encryptedData) {
    const decryptor = new WxmpRsa();
    decryptor.setPrivateKey(privateKey);
    return JSON.parse(decryptor.decryptLong(encryptedData));
}

2.在 main.js 文件中

import Vue from 'vue'
import App from './App'
import { encryptData, decryptData } from './common/crypto'

Vue.config.productionTip = false

// 将加密和解密方法挂载到 Vue 原型链上
Vue.prototype.$encryptData = encryptData;
Vue.prototype.$decryptData = decryptData;

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

3.在任何 Vue 组件中使用:

export default {
    data() {
        return {
            encryptedText: '',
            decryptedText: ''
        }
    },
    methods: {
        handleEncryption() {
            const text = "Hello World";
            this.encryptedText = this.$encryptData(text);
            console.log('Encrypted:', this.encryptedText);
        },
        handleDecryption() {
            this.decryptedText = this.$decryptData(this.encryptedText);
            console.log('Decrypted:', this.decryptedText);
        }
    },
    mounted() {
        this.handleEncryption();
        this.handleDecryption();
    }
}

现在说一下我为什么使用wxmp-rsa，因为我最开始使用的是jsencrypt，确实也能够正常加密解密，在页面中设置的变量可以加密解密成功，但是接口返回的加密数据却无法解密成功，解密出来是null或者[]数组，我以为是我加密解密不生效和后端不匹配 ，我加密的数据给后端，后端是能够正常解析的！反正查了很多原因说是base64的问题具体不太清楚，换成wxmp-rsa直接就能够正常解密加密后端返回 的数据了，如果有小伙伴知道我的这个问题欢迎评论