Vue密码登陆加密RSA实现方案
作者：我是+V
Vue密码登陆加密RSA方案
有一个项目需求需要在前段登陆的时候把登录密码加密后发送，这个地方其实很简单，加密的时候可以使用md5、可以使用sha1，也可以使用现在这个方式加密，就简单记录一下没啥。
RSA是啥
RSA加密算法是一种 非对称加密算法 ，RSA加密使用了"一对"密钥.分别是公钥和私钥，这个公钥和私钥其实就是一组数字!
其二进制位长度可以是1024位或者2048位.长度越长其加密强度越大，目前为止公之于众的能破解的最大长度为768位密钥，只要高于768位，相对就比较安全.所以目前为止，这种加密算法一直被广泛使用.
RSA加密与解密
- 使用 公钥 加密的数据，利用 私钥 进行解密。
- 使用 私钥 加密的数据，利用 公钥 进行解密。
安装依赖
vue使用rsa加密的时候首先需要安装一个依赖，帮助我们实现加密操作。
npm install jsencrypt
安装完就可以用了，如果安装失败用 cnpm。
使用
首先在页面引用
import { JSEncrypt } from 'jsencrypt'创建一个方法，就是使用我们的密码加密用的。
passwordEncryption(passwordUser) {
let publicKey = this.secretKey // 从后台获取公钥，这个保存一下，在这里用。
console.log('后台公钥---------> '， publicKey)
let encryptor = new JSEncrypt() // 新建JSEncrypt对象
encryptor.setPublicKey(publicKey) // 设置公钥
let passwordEncryp = encryptor.encrypt(passwordUser) // 对密码进行加密
return passwordEncryp
}，然后在需要加密的地方使用就可以了。
let pwd = this.passwordEncryption(this.inputForm.password)
Vue使用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);
},我在项目中的使用如下图：
运行结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。