前端vue项目中接口前后的加密解密

最新推荐文章于 2025-02-18 10:16:46 发布

Gaoju_liz

最新推荐文章于 2025-02-18 10:16:46 发布

阅读量1.9k

点赞数 1

分类专栏：学习之旅文章标签： vue.js 前端加密解密

本文链接：https://blog.csdn.net/Gaoju_liz/article/details/119179256

版权

学习之旅专栏收录该内容

14 篇文章

订阅专栏

前端vue项目中接口前后的加密解密

项目需求，对于敏感的数据进项加密！
提到加密首先想到的是crypto-js
本片文章是实际项目中所遇到的，主要采用的是crypto-js AES****RSA 以及qs（不作详细介绍，用兴趣的可以自行百度）

crypto-js jsencrypt.js实际使用例子：
在src文件下创建tools文件，在tools文件下创建crytoJs.js 和jsencrypt.js
目录 src/tools/crytoJs.js
在这里插入图片描述
目录 src/tools/jsencrypt.js

我把代码贴在这里，在拿代码之前，请先查阅下crytoJs.js和jsencrypt.js的安装方法并自行安装
源码：

//crypto-js
import cryptoJs from 'crypto-js';
var keyOne = randomStr(16);

function randomStr(len) {
  var str = '';
  var dict = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  for (var i = 0; i < len; i++) {
    var index = Math.floor(Math.random() * dict.length);
    str += dict[index];
  }
  return str;
}

export default {
  keyOne,
  // 加密函数   aes
  jiami(word) {
    // console.log("要加密数据:"+word);
    var key = cryptoJs.enc.Utf8.parse(keyOne);
    var srcs = cryptoJs.enc.Utf8.parse(word);
    var encrypted = cryptoJs.AES.encrypt(srcs, key, { mode: cryptoJs.mode.ECB, padding: cryptoJs.pad.Pkcs7 });
    return encrypted.toString();
  },
  // 解密函数
  jiemi(resutKey,word) {
    // console.log('传入的密文：', word);
    var key = cryptoJs.enc.Utf8.parse(resutKey);
    var decrypt = cryptoJs.AES.decrypt(word, key, { mode: cryptoJs.mode.ECB, padding: cryptoJs.pad.Pkcs7 });
    // console.log("解密结果:"+cryptoJs.enc.Utf8.stringify(decrypt).toString());
    return cryptoJs.enc.Utf8.stringify(decrypt).toString();
  }
}

//jsencrypt
import JSEncrypt from "jsencrypt"

//公钥
var PUBLIC_KEY = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCaNwwk82wprAv3Kg2hKY5rsTVxEoMEkJfsWRDgSuHp54AxihUuEsjaFKSl5ti1WAFV0eyrAEl9HN/826W69IstYMvMp1NFF9bn0Uo8ECIKGKQ+1Rvzw9Dbas5Y6EOJMR+IZoCkR7WT6Dz6H4a4+FLI/6CJEm802IGo0vHQnPXoSQIDAQAB'//私钥
var PRIVATE_KEY = 'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAINkuJE9BZyx9Ml8dwsRe4hgGrGCxDbc4GwctKAJPPocZWvYxdMfiNwJSUlcU2Dm/vTCKuSs0qhXKQWZHenytzwL39/dbJR5uDR970bgJkMkhqL2X364ZS2AljpOXvNI6EDPHci1/OjIXOv2JXWSH5SjRsk/2S3lriLfP1ld+lDLAgMBAAECgYATp15AQ1tyi9/sv5Ri8HOE+7MieEf3WOSs50JRafBYDSVSk3NL2Dy1hSIUOh4ysXrTi7O0zvEXwyncr4Gc+/RSbO0zjvK1tfh8vYEJ5qVwi8lF2FCVOsps+oSRrOO3fxAFvELJEpe16lvY/ttNarpBppr7y68hHKIjzkpfxdHwqQJBAMlOySe8URhNNHFm57o6sELAkX0EJGGCP+ueMO1bAq57t+K8HSFbrSKq5+kcLpUZLltArZ9afgz1XDLiOE6H3WUCQQCnF03pagzjVQuk3TT7RDOBi/J1+hakFvrtiOoiVJjqqP6+kCve+7uAdlx0wUx4vNnyJJlgcCV/lim21LtQN+pvAkEAh1ZsbkZwzsG47DSevdkO/xGvvji2rMeAacukYS66ksuiSNDnVLHpqFD2MQY9Wwfe3oKRN30DGXsrTRpBeKpm8QJAFYlEaoRXuulYQdydGpG0zcq66ofcaTPpDbqq6tfaicxUYT112hy6ExmuWwIbGCjHMpWTC0IJI0O4hq8uoW1DkwJBALN5oGYsE43OYVvgThturdhhLjUjNSEVCHo4I3cSh97Y+hNNhnHtol3Jhk2+w6rZ/w/gtBGkrwSPKLLC27Q2pT0=';
//使用公钥加密
JSEncrypt = new JSEncrypt();

function jiami(text) {
    // console.log("公钥加密数据:" + text);
    JSEncrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
    return JSEncrypt.encrypt(JSON.stringify(text));
}

function jiemi(text) {
    // console.log("要解密数据:" + text);
    JSEncrypt.setPrivateKey('-----BEGIN RSA PRIVATE KEY-----' + PRIVATE_KEY + '-----END RSA PRIVATE KEY-----');
    return JSEncrypt.decrypt(text);
}

export default {
    jiami, jiemi
}

这里采用的utf8 ,有的地方用的Hex，相要搞清楚可以参考这篇文章：
https://www.jianshu.com/p/a47477e8126a

组件中使用：
引入：

import qs from "qs";
import crytoJs from "../tool/crytoJs";
import jsencrypt from "../tool/jsencrypt";

请求：

此处为敏感数据请谅解：
在这里插入图片描述
具体数据对照上图替换就行了
注：qs方法在这里主要是路径和对象之间的转换，不需要的自行删除

关于加解密又两篇文章写的不错，我把作者地址放在下边：
crypto
https://www.jianshu.com/p/a47477e8126a
jsencrypt
https://www.jianshu.com/p/5008a407b558