Vue密码登陆加密RSA实现方案

 更新时间:2024年07月25日 09:35:19   作者:我是+V  
这篇文章主要介绍了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封装下拉刷新上拉加载组件

    基于vue封装下拉刷新上拉加载组件

    这篇文章主要为大家详细介绍了基于vue封装下拉刷新上拉加载组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue3如何解决slot深层透传问题

    vue3如何解决slot深层透传问题

    这篇文章主要介绍了vue3如何解决slot深层透传问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue高德地图JS API实现海量点标记示例

    vue高德地图JS API实现海量点标记示例

    本文主要介绍了vue高德地图JS API实现海量点标记示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue父组件异步如何获取数据传给子组件

    vue父组件异步如何获取数据传给子组件

    这篇文章主要介绍了vue父组件异步如何获取数据传给子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Map.vue基于百度地图组件重构笔记分享

    Map.vue基于百度地图组件重构笔记分享

    这篇文章主要为大家分享了Map.vue基于百度地图组件重构笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 使用vue-element-admin框架从后端动态获取菜单功能的实现

    使用vue-element-admin框架从后端动态获取菜单功能的实现

    ​ vue-element-admin是一个纯前端的框架,左侧菜单是根据路由生成的。实际开发中经常需要根据当前登陆人员的信息从后端获取菜单进行展示,本文将详细介绍如何实现该功能
    2021-04-04
  • 关于vue状态过渡transition不起作用的原因解决

    关于vue状态过渡transition不起作用的原因解决

    这篇文章主要介绍了关于vue状态过渡transition不起作用的原因解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue中遍历数组的新方法实例详解

    Vue中遍历数组的新方法实例详解

    这篇文章主要介绍了Vue中遍历数组的新方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    这篇文章主要介绍了vue.js学习笔记:如何加载本地json文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。
    2017-01-01
  • Vue配合Vant使用时area省市区选择器的使用方式

    Vue配合Vant使用时area省市区选择器的使用方式

    这篇文章主要介绍了Vue配合Vant使用时area省市区选择器的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01

最新评论