原文链接:vue 使用aes加密和rsa加密过程 - 一心二念 - 博客园
rsa
1、安装jsencrypt,执行以下命令
npm install jsencrypt --save-dev
2 、安装encryptlong,执行以下命令
npm i encryptlong -S
安装这个就可以加密加长的字符了
3、创建rsa.js文件
4、 引入‘jsencrypt’,‘encryptlong’
/* 产引入jsencrypt实现数据RSA加密 */
import JSEncrypt from 'jsencrypt' // 处理长文本数据时报错 jsencrypt.js Message too long for RSA
/* 产引入encryptlong实现数据RSA加密 */
import Encrypt from 'encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。
5、准备publicKey(公钥)&& privateKey(私钥)
// 密钥对生成地址 http://web.chacuo.net/netrsakeypai
// 公钥key
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
'2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
// 私钥key
const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
'/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
'4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
'tTbklZkD2A=='
6、写完整的加密解密函数
export default {
/* JSEncrypt加密 */
rsaPublicData(data) {
var jsencrypt = new JSEncrypt()
jsencrypt.setPublicKey(publicKey)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = jsencrypt.encrypt(data)
return result
},
/* JSEncrypt解密 */
rsaPrivateData(data) {
var jsencrypt = new JSEncrypt()
jsencrypt.setPrivateKey(privateKey)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = jsencrypt.encrypt(data)
return result
},
/* 加密 */
encrypt(data) {
const PUBLIC_KEY = publicKey
var encryptor = new Encrypt()
encryptor.setPublicKey(PUBLIC_KEY)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
const result = encryptor.encryptLong(data)
return result
},
/* 解密 - PRIVATE_KEY - 验证 */
decrypt(data) {
const PRIVATE_KEY = privateKey
var encryptor = new Encrypt()
encryptor.setPrivateKey(PRIVATE_KEY)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = encryptor.decryptLong(data)
return result
}
}
7、在main.js主文件引入,将Rsa注册为公共方法,方便其他页面调用
import Rsa from "@/utils/rsa.js"
Vue.prototype.Rsa = Rsa // 将Rsa注册为公共方法,方便其他页面调用
8、完整的rsa.js文件
/* 产引入jsencrypt实现数据RSA加密 */
import JSEncrypt from 'jsencrypt' // 处理长文本数据时报错 jsencrypt.js Message too long for RSA
/* 产引入encryptlong实现数据RSA加密 */
import Encrypt from 'encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。
// 密钥对生成 http://web.chacuo.net/netrsakeypair
// 公钥key
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
'2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
// 私钥key
const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
'/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
'4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
'tTbklZkD2A=='
export default {
/* JSEncrypt加密 */
rsaPublicData(data) {
var jsencrypt = new JSEncrypt()
jsencrypt.setPublicKey(publicKey)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = jsencrypt.encrypt(data)
return result
},
/* JSEncrypt解密 */
rsaPrivateData(data) {
var jsencrypt = new JSEncrypt()
jsencrypt.setPrivateKey(privateKey)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = jsencrypt.encrypt(data)
return result
},
/* 加密 */
encrypt(data) {
const PUBLIC_KEY = publicKey
var encryptor = new Encrypt()
encryptor.setPublicKey(PUBLIC_KEY)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
const result = encryptor.encryptLong(data)
return result
},
/* 解密 - PRIVATE_KEY - 验证 */
decrypt(data) {
const PRIVATE_KEY = privateKey
var encryptor = new Encrypt()
encryptor.setPrivateKey(PRIVATE_KEY)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = encryptor.decryptLong(data)
return result
}
}
9、在*.vue 页面使用RSA加解密(demo)
this.Rsa.方法名
10、demo完整代码
<template>
<div class="rsa-container">
<van-row>
<van-col span="24">
<img src="../../assets/img/demo/rsa_banner.jpg" height="220" width="100%"/>
<van-field v-model="rasEncryptData.reqStr" rows="1" autosize label="加密前" type="textarea" placeholder="请输入……" @input="reqTest()"></van-field>
<van-field v-model="rasEncryptData.encryptStr" rows="1" autosize label="加密后" type="textarea" placeholder="请输入……" readonly></van-field>
<van-field v-model="rasEncryptData.decryptStr" rows="1" autosize label="解密后" type="textarea" placeholder="请输入……" readonly></van-field>
</van-col>
</van-row>
</div>
</template>
<script>
export default {
data() { // 定义数据
return {
rasEncryptData: { // 加密后数据
reqStr: '', // 加密前数据
encryptStr: '', // 加密后数据
decryptStr: '' // 解密后数据
}
}
},
methods: { // 定义方法
reqTest() {
this.rasEncryptData.encryptStr = this.Rsa.encrypt(this.rasEncryptData.reqStr) // 加密
this.rasEncryptData.decryptStr = this.Rsa.decrypt(this.rasEncryptData.encryptStr) // 解密
}
},
mounted() { // 此时已经将编译好的模板,挂载到了页面指定的容器中显示
},
filters: {}, // 定义私有过滤器
directives: {}, // 定义私有指令
components: {}, // 定义实例内部私有组件的
beforeCreate() { }, // 实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
created() { }, // 实例已经在内存中创建OK,此时data和methods已经创建OK,此时还没有开始编译模板
beforeMount() { }, // 此时已经完成了模板的编译,但是还没有挂载到页面中
beforeUpdate() { }, // 状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
updated() { }, // 实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
beforeDestroy() { }, // 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed() { } // Vue实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
}
</script>
11、前端rsa加密,后端去解密(乱码问题)
前端rsa加密,后端去解密,但是呢有中文的时候解密出来就乱了,想了各种办法未果;
结论,既然中文乱码,我就不传中文就行了哈。在加密之前用
这个方法很巧妙的利用了解决url加密的工具,何乐而不为呢。
// 前端加密前将所有中文encoder掉
// 此函数是js原生函数
var en = encodeURIComponent(str);
// 后台再转换回来就行了
String result = java.net.URLDecoder.decode(en ,"UTF-8");
Aes
1、安装crypto-js,执行以下命令
//安装
npm install crypto-js --save-dev
2、创建aes.js文件
3、完整的aes.js文件
import CryptoJS from 'crypto-js'
export default{
//AES加密
encryptAes (data) {
const aesKey = 'Oet1IsRCFQ57g0uZ';
if (aesKey && data) {
const key = CryptoJS.enc.Utf8.parse(aesKey);
const encrypt = CryptoJS.AES.encrypt(data, key, {
iv : CryptoJS.enc.Utf8.parse(aesKey.substr(0, 16)),
mode : CryptoJS.mode.ECB,
padding : CryptoJS.pad.Pkcs7
});
return encrypt.toString()
}
},
//AES解密
decryptAes(data){
const aesKey = 'OeJ1iyRnFQ54g0ex';
if (aesKey && data) {
const key = CryptoJS.enc.Utf8.parse(aesKey);
const decrypt = CryptoJS.AES.decrypt(data, key, {
iv : CryptoJS.enc.Utf8.parse(aesKey.substr(0, 16)),
mode : CryptoJS.mode.ECB,
padding : CryptoJS.pad.Pkcs7
});
return decrypt.toString(CryptoJS.enc.Utf8)
}
}
}
4、在main.js主文件引入,将Aes注册为公共方法,方便其他页面调用
import Aes from "@/utils/aes.js"
Vue.prototype.Aes = Aes
5、在*.vue 页面使用AES加解密(demo)
let aesStr = this.Aes.encryptAes(JSON.stringify(parArr));
[axios]在then方法中使用普通函数无法访问vue实例化的this
问题
axios.get(url).then(function(res){
console.log(res) //可以正常拿到后台数据
this.data = res //这里不会将后台拿到的数据赋值给变量data
//但注意这里拿不到Vue实例化的this
})
原因
原来是在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
解决
axios.get(url).then((res)=>{
console.log(res) //这里也可以正常拿到后台数据
this.data = res //这里可以将后台拿到的数据赋值给变量data
})
Java端的加密工具和安卓加密工具的base64依赖不一致,Java可以引用这个依赖
import org.apache.tomcat.util.codec.binary.Base64;