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

<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;