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

简介: 在VUE中使用RSA加密解密加签解签

前言

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

我在项目中的使用如下图:

运行结果

总结

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

目录
相关文章
|
4天前
|
移动开发 JavaScript 安全
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
49 0
|
4天前
|
JavaScript 前端开发 关系型数据库
金融技术解决方案:用Python和Vue开发加密货币交易平台
【4月更文挑战第11天】本文介绍了如何使用Python和Vue.js构建加密货币交易平台。首先确保安装了Python、Node.js、数据库系统和Git。后端可选择Flask或Django框架,通过RESTful API处理交易。前端利用Vue.js、Vuex和Vue Router创建用户友好的界面,并用Axios与后端通信。这种架构促进团队协作,提升代码质量和平台功能。
|
4天前
|
JavaScript 安全 前端开发
【教程】 Vue混淆加密与还原
【教程】 Vue混淆加密与还原
109 0
|
4天前
|
JavaScript 安全 开发工具
​Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
简介在 Vue 应用程序的开发中,代码压缩、加密和混淆是优化应用程序性能和提高安全性的重要步骤。 Vue CLI 是一个功能强大的开发工具,它提供了方便的配置选项来实现这些功能。本文将介绍如何使用 Vue CLI 配置代码压缩、加密和混淆功能,以提高应用程序的性能和安全性。
|
并行计算 JavaScript 算法
Vue中 实现 DES 加密和解密
Vue中 实现 DES 加密和解密
423 0
|
JavaScript 数据安全/隐私保护
Vue MD5加密你用吗?
Vue MD5加密你用吗?
|
存储 JavaScript 前端开发
Axios 教程:Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板
Axios 是一个基于Promise的 HTTP 请求库,它用在 node.js 和浏览器里。本教程教你如何使用 Axios 库发出 API 请求远程调取数据。在本教程中,你将学到如何使用 Vue + Axios 搭建一套加密币实时行情看板,你会学到 Axios 如何向加密货币行情 API 请求数据,存储数据,然后使用 Vue 在前端展示这些数据,最终完成「实时行情看板」的搭建。为了让看板看起来更漂亮,我们将使用FoundationCSS 框架。
526 0
|
4天前
|
算法 Java 数据安全/隐私保护
java MD5 32位加密
java MD5 32位加密
21 0
|
4天前
|
Java 数据安全/隐私保护
Java实现最电话号码的简单加密源码
Java实现最电话号码的简单加密源码
20 0
|
4天前
|
存储 安全 算法
【接口加密】Java中的接口加密实践
【接口加密】Java中的接口加密实践