Vue项目怎么实现rsa加密

2023-07-02 08:52

短信预约 -IT技能 免费直播动态提醒

这篇“Vue项目怎么实现rsa加密”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue项目怎么实现rsa加密”文章吧。

安装jsencrypt

npm i jsencrypt

引入jsencrypt

在 main.js 文件中引入 jsencrypt

import JSEncrypt from "jsencrypt"; //引入模块Vue.prototype.$jsEncrypt = JSEncrypt; //配置全局变量

获取公钥（调接口）

export function getPubKey(data) {  return http({    url: "/index/pub-key", //每个项目的接口url不一样 根据实际情况修改    method: "GET", // 同理    data  });}

引入getPubKey

在需要加密的组件中引入getPubKey接口，然后进行账号或者密码加密。下面是以登录页面账号、密码加密为例。

在login.vue文件中引入getPubKey

import { getPubKey } from "@/api"; //每个项目路径都会有区别

登陆时加密

 getPubKey().then(({ result, data: keyData }) => { // getPubKey---获取公钥接口        if (result) {          const jse = new this.$jsEncrypt(); // 实例化一个 jsEncrypt 对象          jse.setPublicKey(keyData); //配置公钥          let userAccount = jse.encrypt(this.loginForm.user); //加密账号          let passWord = jse.encrypt(this.loginForm.password); //加密密码          login({            userAccount: userAccount,            passWord: passWord,          }).then(({ result, message }) => {            if (result) {              console.log("登录成功");              // 登录成功后的操作            } else {              // 登录失败操作              this.loginTextError = message;            }          });        }      });

使用rsa加密，解密，加签，解签

vue中使用RSA加密，解密，加签，验签安装引js加密解密加签，验签测试

安装

一个是进行加密，解密的： npm install jsencrypt --save
如果加密过长使用 npm i encryptlong --save
一个是进行签名验证的： npm install jsrsasign --save

引js

import Encrypt from ‘encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。

加密解密

rsaPrivateData(data) {var jsencrypt = new JSEncrypt()jsencrypt.setPrivateKey(privateKey)// 如果是对象/数组的话，需要先JSON.stringify转换成字符串var result = jsencrypt.encrypt(data)return result},function getEncrypt(data) {let encrypt = new Encrypt();encrypt.setPublicKey(“你的公钥”);let info = encrypt.encryptLong(JSON.stringify(data))return info}function getDecrypt(data) {let decrypt = new Encrypt();decrypt.setPrivateKey(“你的私钥”);let info = decrypt.decryptLong(data)return info}

加签，验签

在main.js中引入

import jsrsasign from 'jsrsasign'

挂载在main.js中

Vue.prototype.$getSign = function (signData) {    var priK = "-----BEGIN PRIVATE KEY-----你的私钥-----END PRIVATE KEY-----";    //创建rsa实例    var rsa = new jsrsasign.RSAKey();      //因为后端提供的是pck#8的密钥对，所以这里使用 KEYUTIL.getKey来解析密钥    rsa = jsrsasign.KEYUTIL.getKey(priK);    // rsa.readPrivateKeyFromPEMString(priK);    let sig = new jsrsasign.KJUR.crypto.Signature({"alg": "SHA256withRSA"});    // 初始化    sig.init(rsa)    // 传入待加密字符串    sig.updateString(signData)    // 生成密文    let sign = jsrsasign.hextob64(sig.sign());    // 对加密后内容进行URI编码    // sign = encodeURIComponent(sign);    console.log(sign);}

Vue.prototype.$getSignCode = function (strIng) {    // 创建RSAKey对象    var rsa = new jsrsasign.RSAKey();    //因为后端提供的是pck#8的秘钥对，所以这里使用 KEYUTIL.getKey来解析秘钥    var signPrivateKey = `-----BEGIN PRIVATE KEY-----你的公钥-----END PRIVATE KEY-----`    // 将密钥转码,其实就是将头部尾部默认字符串去掉    signPrivateKey = jsrsasign.KEYUTIL.getKey(signPrivateKey );    // 创建Signature对象，设置签名编码算法    // alg:对应的是规则 需要和后端统一    var sig = new jsrsasign.KJUR.crypto.Signature({        "alg": "SHA256withRSA",        "prov": "cryptojs/jsrsa",        "prvkeypem": signPrivateKey     });    // 初始化    sig.init(signPrivateKey )    // 传入待加密字符串    sig.updateString(strIng);    // 生成密文    var sign = jsrsasign.hextob64(sig.sign());    console.log(sign)    // 对加密后内容进行URI编码    // sign = encodeURIComponent(sign);    //把参数与密文拼接好，返回    var params = 'Str=' + strIng + '&sign=' + sign;    return sign;}

测试

//参数 req    var req = {};    req["equipmentType"]='00';    req["equipmentIp"] = '192.168.3.23';    //JSON.stringify(req) 转成json字符串    console.log(JSON.stringify(req))        var r = this.$getSignCode(JSON.stringify(req));    var e = this.$attestationCode(JSON.stringify(req), r);    console.log(e);

Vue项目怎么实现rsa加密