Vue RSA加密和解密

　　接到一个需求，需要对我们的密码进行加密，然后再传输。以前搞过，但是不是Vue中的。现在用Vue弄一遍，大致的思路是一样的。如果你还不了解什么是RSA的话，可以看看这个和这个。话不多说，首先是安装

npm i jsencrypt -D
2 npm i encryptlong -S //encryptlong是基于jsencrypt扩展的长文本分段加解密功能

安装完成之后，需要创建一个rsa.js,为了是方便咱们使用和以后的管理操作。生成一对公钥和密钥

// 密钥对生成 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
    }
}

写完之后，还需要把这个方法注册成为全局的方法，这个时候，需要再main.js中添加下面的话

import Rsa from "@/utils/rsa.js"
Vue.prototype.Rsa = Rsa // 将Rsa注册为公共方法,方便其他页面调用

然后就可以使用了。

<template>
    <div class="">
        <p></p>
        <el-input v-model="rasEncryptData.reqStr" placeholder="请输入内容"></el-input>
        <el-button icon="el-icon-search" circle @click="reqTest"></el-button>
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple">加密的数据:<p>{{rasEncryptData.encryptStr}}</p></div></el-col>
            <el-col :span="24"><div class="grid-content bg-purple-light"></div>解密的数据:{{rasEncryptData.decryptStr}}</el-col>
        </el-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() {
    // 此时已经将编译好的模板，挂载到了页面指定的容器中显示
  },

};
</script>
<style lang="scss" scoped>
p{
    word-break: break-all;
}
</style>