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;