在uni-app中使用RSA加密可以通过JavaScript库来实现。由于uni-app是基于Vue.js的跨平台框架,你可以使用适用于JavaScript的RSA加密库,比如node-forge或者jsencrypt或者wxmp-rsa。本文主要介绍jsencrypt和wxmp-rsa,我自己项目用的wxmp-rsa,至于为什么会用后面会说!
- 安装jsencrypt
首先,需要在你的uni-app项目中安装jsencrypt库。你可以使用npm或者yarn来安装这个库。
使用npm:
npm install jsencrypt
使用yarn:
yarn add jsencrypt
- 使用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);
}
- 将代码集成到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直接就能够正常解密加密后端返回 的数据了,如果有小伙伴知道我的这个问题欢迎评论