Vue密码登陆加密RSA实现方案
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);
},我在项目中的使用如下图：
运行结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue props传入function时的this指向问题解读
这篇文章主要介绍了Vue props传入function时的this指向问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要给大家介绍了关于vue3路由跳转params传参接收不到的解决办法,Vue3是目前前端开发中非常流行的框架之一,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
axios从功能上来说就是主要用于我们前端向后端发送请求,是基于http客户端的promise,面向浏览器和nodejs,下面这篇文章主要给大家介绍了关于Vue2中使用axios的3种方法,需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了Vue自定义指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
Swiper常用于移动端网站的内容触摸滑动,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,下面这篇文章主要给大家介绍了关于swiper在vue中的简单使用方法,需要的朋友可以参考下2022-09-09
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Electron集成React和Vue的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理上基本大同小异。这篇文章将给大家介绍Vue 父子组件数据单向绑定与Vue 父子组件数据双向绑定的对比从而认识双向绑定2021-09-09
因为项目中需要根据后端返回的权限进行功能的显示隐藏，所以就加了个权限指令。不用写if else进行判断，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
vue中的addEventListener和removeEventListener用法说明
这篇文章主要介绍了vue中的addEventListener和removeEventListener用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本篇文章主要介绍了vue+axios+mock.js环境搭建的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论