在VUE中使用RSA加密解密加签解签

Myth丶恋晨 2022-12-28 09:21 284阅读 0赞

### 目录 ###

*  前言
 *  一、什么是RSA加密？
 *  二、加密过程
 *  三、在Vue中使用步骤
 *   *   *  使用步骤：
         *   *  1、安装依赖
             *  2、在main.js中引入
             *  3、将加密解密方法封装到通用的js内
             *  运行结果
 *  总结

--------------------

# 前言 #

项目中部分隐私参数要前后端对接交互时，出于安全性考虑，我们会对重要的参数进行加密后再进行传输，一般采用的加密方式是非对称性加密RSA算法。

--------------------

提示：以下是本篇文章正文内容，下面案例可供参考

# 一、什么是RSA加密？ #

RSA加密是一种非对称加密。  
可以在不直接传递密钥的情况下，完成解密。  
这能够确保信息的安全性，避免了直接传递密钥所造成的被破解的风险。  
RSA是由一对密钥来进行加解密的过程，分别称为公钥和私钥。  
两者之间有数学相关，该加密算法的原理就是对一极大整数做因数分解的困难性来保证安全性。  
通常个人保存私钥，公钥是公开的（可能同时多人持有）。

# 二、加密过程 #

*  （1）A生成一对密钥（公钥和私钥），私钥不公开，A自己保留。公钥为公开的，任何人可以获取。
 *  （2）A传递自己的公钥给B，B用A的公钥对消息进行加密。
 *  （3）A接收到B加密的消息，利用A自己的私钥对消息进行解密。  
    　  
    在这个过程中，只有2次传递过程，第一次是A传递公钥给B，第二次是B传递加密消息给A，即使都被敌方截获，也没有危险性，因为只有A的私钥才能对消息进行解密，防止了消息内容的泄露。

--------------------

# 三、在Vue中使用步骤 #

一般是客户端初始化时访问服务端时，服务端会生成一对RSA对，及公钥和密钥。

*  如果前端只需要将要传给后端的数据进行**加密**后传输，那么前端可以只要公钥，通过公钥对要传输的参数进行加密后把加密的字符串发给后端即可，后端自有办法解密。
 *  如果前端要获取后端传过来的已经加密后的字符串，并且**解密**使用，那么前端就需要拿到RSA对立面的私钥进行解密后使用了。

### 使用步骤： ###

#### 1、安装依赖 ####

首先引入jsencrypt

npm install jsencrypt --save

#### 2、在main.js中引入 ####

import JsEncrypt from 'jsencrypt'
    Vue.prototype.$jsEncrypt = JsEncrypt

#### 3、将加密解密方法封装到通用的js内 ####

let publicKey = '这里是封装的公钥'
    let privateKey = '这里是封装的私钥'
    //加密方法
      RSAencrypt(pas){ 
        //实例化jsEncrypt对象
        let jse = new JSEncrypt();
        //设置公钥
        jse.setPublicKey(publicKey);
         console.log('加密：'+jse.encrypt(pas))
        return jse.encrypt(pas);
      },
      
    //解密方法
      RSAdecrypt(pas){ 
        let jse = new JSEncrypt();
        // 私钥
        jse.setPrivateKey(privateKey)
         console.log('解密：'+jse.decrypt(pas))
        return jse.decrypt(pas);
      },

我在项目中的使用如下图：  
![在VUE中使用RSA加密解密加签解签][VUE_RSA]

#### 运行结果 ####

![在这里插入图片描述][20201216153523787.png]

# 总结 #

后端的使用Springboot对RSA进行加解密的过程可以看我的另一篇博客

[VUE_RSA]: /images/20221120/0721d607d6c04ecbba7e9158ebeed10f.png
[20201216153523787.png]: https://img-blog.csdnimg.cn/20201216153523787.png