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

本文介绍了RSA加密的基本原理和在Vue项目中如何使用RSA加密进行数据安全传输。通过非对称加密的方式,确保敏感信息在前端与后端交互时的安全。在Vue中,首先安装jsencrypt库,然后在main.js中引入并封装加密解密方法,使用公钥进行加密,私钥解密,从而保证数据的安全性。
摘要由CSDN通过智能技术生成


前言

项目中部分隐私参数要前后端对接交互时,出于安全性考虑,我们会对重要的参数进行加密后再进行传输,一般采用的加密方式是非对称性加密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加密解密加签解签

运行结果

在这里插入图片描述

总结

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清如许.

整理不易,点滴助力就是不竭动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值