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/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=='

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完整代码


 

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;