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 引入AMap高德地图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue中localStorage的用法和监听localStorage值的变化
这篇文章主要介绍了Vue中localStorage的用法和监听localStorage值的变化,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
vue + element-plus自定义表单验证(修改密码业务)的示例
这篇文章主要介绍了vue + element-plus自定义表单验证(修改密码业务),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-04-04
vite+vue3项目集成ESLint与prettier的过程详解
这篇文章主要介绍了vite+vue3项目中集成ESLint与prettier的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
本篇文章主要介绍了webstorm和.vue中es6语法报错的解决方法，小编总结了webstorm和.vue中出现的es6语法报错，避免大家采坑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了vue computed无法得到this的属性或方法的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家介绍了vuex Mutations同步Actions异步原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家详细介绍了Vue实现日历小插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
今天小编就为大家分享一篇vue+vue-router转场动画的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue 处理异步加载顺序问题之如何在Konva中确保文本在图片之上显示
在处理Konva中的异步加载顺序问题时,确保在图像加载完成后再添加其他元素是关键,通过将回调函数放在imageObj.onload中,并正确处理变量捕获,我们可以确保文本总是绘制在图片之上,这不仅解决了显示顺序的问题,也为未来的调试提供了明确的方向,感兴趣的朋友一起看看吧2024-07-07
最新评论