Vue RSA加密和解密

　　接到一個需求，需要對我們的密碼進行加密，然後再傳輸。以前搞過，但是不是Vue中的。現在用Vue弄一遍，大致的思路是一樣的。如果你還不瞭解什麼是RSA的話，可以看看這個和這個。話不多說，首先是安裝

1 npm i jsencrypt -D
2 npm i encryptlong -S //encryptlong是基於jsencrypt擴展的長文本分段加解密功能

安裝完成之後，需要創建一個rsa.js,爲了是方便咱們使用和以後的管理操作。生成一對公鑰和密鑰

 1 // 密鑰對生成 http://web.chacuo.net/netrsakeypair
 2 // 公鑰key
 3 const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
 4     '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
 5 // 私鑰key
 6 const privateKey = 'MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8\n' +
 7     'mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9p\n' +
 8     'B6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue\n' +
 9     '/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZ\n' +
10     'UBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6\n' +
11     'vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha\n' +
12     '4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3\n' +
13     'tTbklZkD2A=='

然後方法的話，其實是一樣的

 1 export default {
 2     /* JSEncrypt加密 */
 3     rsaPublicData(data) {
 4         var jsencrypt = new JSEncrypt()
 5         jsencrypt.setPublicKey(publicKey)
 6         // 如果是對象/數組的話，需要先JSON.stringify轉換成字符串
 7         var result = jsencrypt.encrypt(data)
 8         return result
 9     },
10     /* JSEncrypt解密 */
11     rsaPrivateData(data) {
12         var jsencrypt = new JSEncrypt()
13         jsencrypt.setPrivateKey(privateKey)
14         // 如果是對象/數組的話，需要先JSON.stringify轉換成字符串
15         var result = jsencrypt.encrypt(data)
16         return result
17     },
18     /* 加密 */
19     encrypt(data) {
20         const PUBLIC_KEY = publicKey
21         var encryptor = new Encrypt()
22         encryptor.setPublicKey(PUBLIC_KEY)
23         // 如果是對象/數組的話，需要先JSON.stringify轉換成字符串
24         const result = encryptor.encryptLong(data)
25         return result
26     },
27     /* 解密 - PRIVATE_KEY - 驗證 */
28     decrypt(data) {
29         const PRIVATE_KEY = privateKey
30         var encryptor = new Encrypt()
31         encryptor.setPrivateKey(PRIVATE_KEY)
32         // 如果是對象/數組的話，需要先JSON.stringify轉換成字符串
33         var result = encryptor.decryptLong(data)
34         return result
35     }
36 }

寫完之後，還需要把這個方法註冊成爲全局的方法，這個時候，需要再main.js中添加下面的話

import Rsa from "@/utils/rsa.js"
Vue.prototype.Rsa = Rsa // 將Rsa註冊爲公共方法,方便其他頁面調用

然後就可以使用了。

 1 <template>
 2     <div class="">
 3         <p></p>
 4         <el-input v-model="rasEncryptData.reqStr" placeholder="請輸入內容"></el-input>
 5         <el-button icon="el-icon-search" circle @click="reqTest"></el-button>
 6         <el-row>
 7             <el-col :span="24"><div class="grid-content bg-purple">加密的數據:<p>{{rasEncryptData.encryptStr}}</p></div></el-col>
 8             <el-col :span="24"><div class="grid-content bg-purple-light"></div>解密的數據:{{rasEncryptData.decryptStr}}</el-col>
 9         </el-row>
10     </div>
11 </template>
12  
13 <script>
14 export default {
15   data() {
16     // 定義數據
17     return {
18       rasEncryptData: {
19         // 加密後數據
20         reqStr: "", // 加密前數據
21         encryptStr: "", // 加密後數據
22         decryptStr: "" // 解密後數據
23       }
24     };
25   },
26   methods: {
27     // 定義方法
28     reqTest() {
29       this.rasEncryptData.encryptStr = this.Rsa.encrypt(
30         this.rasEncryptData.reqStr
31       ); // 加密
32       this.rasEncryptData.decryptStr = this.Rsa.decrypt(
33         this.rasEncryptData.encryptStr
34       ); // 解密
35     }
36   },
37   mounted() {
38     // 此時已經將編譯好的模板，掛載到了頁面指定的容器中顯示
39   },
40 
41 };
42 </script>
43 <style lang="scss" scoped>
44 p{
45     word-break: break-all;
46 }
47 </style>