vue中使用 RSA 加密/解密 账号密码!

5,988 阅读2分钟

说明:RSA加密是一种非对称加密。可以在不直接传递密钥的情况下,完成解密。这能够确保信息的安全性,避免了直接传递密钥所造成的被破解的风险。是由一对密钥来进行加解密的过程,分别称为公钥和私钥。两者之间有数学相关,该加密算法的原理就是对一极大整数做因数分解的困难性来保证安全性。通常个人保存私钥,公钥是公开的(可能同时多人持有)。

前后端使用rsa加密: 一般是客户端初始化时访问登录服务时,服务端面动态生成一对RSA对,公钥传给客户端,客户端拿到后,用户输入密码后,点登录时用公钥加密返回给服务端,服务端用私钥解就行了

在使用过程中你会发现无论是公钥或者私钥所得到的数据解密出来的都是一样的,这就比较神奇,并且是RAS的核心所在!

使用jsencrypt进行rsa加密

1.首先需要我们使用vue框架配置下载依赖包

npm install jsencrypt --save

安装完成以后继续

2.接下来需要在vue入口文件main.js中引入

import { JSEncrypt } from 'jsencrypt'

3.然后需要我们在assets/创建文件夹js/创建文件jsencryptKey.js

 引入vue将方法挂载到全局vue中

import Vue from 'vue'
// 加密方法  公钥
Vue.prototype.$getCode  = function(password){
    let encrypt = new JSEncrypt()
    encrypt.setPublicKey('后台给的公钥')
    let data = encrypt.encrypt(password)
    return data
   }
//    解密方法 私钥
   Vue.prototype.$decryptCode  = function(password){
    let encrypt = new JSEncrypt()
    encrypt.setPublicKey('后台给的私钥')
    let data = encrypt.decrypt(password)
    return data
   }

4.在入口文件中再次引入新创建文件

import './assets/js/jsencryptKey'

5.最后一步也就是组件中如何去使用

这是一则利用私钥解密的方法,使用场景为接口获取后端返回加密过后的编码,前端需要去解密使用,解密结果为四位随机数。

使用this.$decryptCode(数据) 此方法是步骤三中自定义方法已经挂载到vue全局中,故此为this中

this.$get("/creditsecurity/common/enCode").then(res => {
      this.decryption = this.$decryptCode(res.data);
    });

这就是整个RSA加密或者解密整体流程,欢迎各位前来指导!

作者:前端阿超