vuersa加密（vue 加密解密）

本篇文章给大家谈谈vuersa加密，以及vue 加密解密对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、jsencrypt实现前端RSA非对称加密解密（vue项目）
• 2、前端AES + RSA加密
• 3、Vue中使用RSA分段加解密
• 4、vue中如何做加密登陆

jsencrypt实现前端RSA非对称加密解密（vue项目）

最近一个vue项目要求所有密码数据需要使用RSA非对称加密传输，以为挺简单，结果开发过程中还是遇到了些问题，简单做个笔记。同时也希望可以帮助到遇到同样问题的道友门。

重点来了：使用jsencrypt实现RSA非对称加解密

因为这里直接闭衡春在前端加解密，所以需要一对现成的密钥，我们通过 密钥在线生成器 得到：

然后在需要使用的文件中引入JSEncrypt，我是将所有工具拦颂函数都封装在一个js文件的，我就直接在该文件中引入，我看也有人是在main.js中引入的。

到这里我们的加密解密方法就完成了，在需要的地方直接拿过来用就好了！

大功告成！这样就完了？我以为这样就ok了。

当然，如果没有遇到这个bug，就可以忽略下面的内容了。

从上面截图可以看到，重启项目的时候报错： navigator is not defined

而且这个bug有点奇葩，先启动项目再引入jsencrypt就什么问题都轿耐没有，但是先引入jsencrypt再启动项目就报错。这也是我前面能顺利执行的原因所在。

通过好一通折腾，用了网上的各种方法，比如在main.js引入jsencrypt、引入jsdom之类的，都没能解决这个问题，最终还是在jsencrypt的git相关 issue 下找到了这个问题的解决方案。

到这里问题就算基本解决了，但是由于项目组不止我一个前端，我不能要求每个同事或者以后接手维护项目的同事都要在node_modules中去替换文件。

所以就采用了另外一种方案：将jsencrypt.js通过在线js压缩器压缩至jsencrypt.min.js中，然后把jsencrypt.min.js放到src/assets/jsencrypt文件夹中，就不用npm install的方式了。

换了种方式，jsencrypt的引用方式需要做出相应的调整：

参考链接： RSA非对称加密传输---前端加密解密(VUE项目)

PS：才疏学浅，如果有考虑不周之处或者有更好的解决方案，欢迎指正探讨！

[img]

前端AES + RSA加密

常见加密方式分为以下两类：

以中后台管理项目为例：

需完善点：

设想：

鉴于AES较高的性能及RSA公私钥方式的易用性，能否结合这两者的优点实现对数据安全的保障？

以下是构思的业务流程闷败运：

这里结合Vue实现

Tip:

结合两种加密方式使用，可以枯信满足大多数的使用场景，发挥出各自的优点。

理解AES + RSA的结合加密思蚂梁路后，实现方式可根据具体情况修改。

————加密定义及分类摘自 百度百科

欢迎大家积极讨论，共同进步。

我的掘金

Vue中使用RSA分段加解密

// Convert a hex string to a byte array  16进制转byte数组

function hexToBytes(hex) {

  for (var bytes = [], c = 0; c hex.length; c += 2)

    bytes.push(parseInt(hex.substr(c, 2), 16));

  return bytes;

}

// Convert a byte array to a hex string byte数组转16进制

function bytesToHex(bytes) {

  for (var hex = [], i = 0; i bytes.length; i++) {

    hex.push((bytes[i] 4).toString(16));

    hex.push((bytes[i] 0xF).toString(16));

  }

  return hex.join("");

};

分段加解密是自己写的方法需要进行十六进制和byte数组进行相互转换（具体为什么我也不清楚，希望有知道的大神，可以为我指点一下）

在原有的JSEncrypt中添加分段加解密的方法

JSEncrypt.prototype.encryptLong2 = function (string) {

  var k = this.getKey(); 

 含芦 try {

    var ct = "";     //RSA每次加密最大117bytes，需要辅尺老握助方法判断字符串截取位置

    //1.获取字符串截取点

    var bytes = new Array();

    bytes.push(0);

    var byteNo = 0;

    var len, c;

    len = string.length;

    var temp = 0;

    for (var i = 0; i len; i++) {

      c = string.charCodeAt(i);

      if (c = 0x010000 c = 0x10FFFF) {

        byteNo += 4;

      } else if (c = 0x000800 c = 0x00FFFF) {

        byteNo += 3;

     陵庆 } else if (c = 0x000080 c = 0x0007FF) {

        byteNo += 2;

      } else {

        byteNo += 1;

      }

      if ((byteNo % 117) = 114 || (byteNo % 117) == 0) {

        if (byteNo - temp = 114) {

          bytes.push(i);

          temp = byteNo;

        }

      }

    }

    //2.截取字符串并分段加密

    if (bytes.length 1) {

      for (var i = 0; i bytes.length - 1; i++) {

        var str;

        if (i == 0) {

          str = string.substring(0, bytes[i + 1] + 1);

        } else {

          str = string.substring(bytes[i] + 1, bytes[i + 1] + 1);

        }

        var t1 = k.encrypt(str);

        ct += t1;

      };

      if (bytes[bytes.length - 1] != string.length - 1) {

        var lastStr = string.substring(bytes[bytes.length - 1] + 1);

        ct += k.encrypt(lastStr);

      }

      return hexToBytes(ct);

    }

    var t = k.encrypt(string);

    var y = hexToBytes(t);

    return y;

  } catch (ex) {

    return false;

  }

};

// utf-8数组转字符串

function utf8ByteToUnicodeStr(utf8Bytes) {

  var unicodeStr = "";

  for (var pos = 0; pos utf8Bytes.length;) {

    var flag = utf8Bytes[pos];

    var unicode = 0;

    if ((flag 7) === 0) {

      unicodeStr += String.fromCharCode(utf8Bytes[pos]);

      pos += 1;

    } else if ((flag 0xFC) === 0xFC) {

      unicode = (utf8Bytes[pos] 0x3) 30;

      unicode |= (utf8Bytes[pos + 1] 0x3F) 24;

      unicode |= (utf8Bytes[pos + 2] 0x3F) 18;

      unicode |= (utf8Bytes[pos + 3] 0x3F) 12;

      unicode |= (utf8Bytes[pos + 4] 0x3F) 6;

      unicode |= (utf8Bytes[pos + 5] 0x3F);

      unicodeStr += String.fromCharCode(unicode);

      pos += 6;

    } else if ((flag 0xF8) === 0xF8) {

      unicode = (utf8Bytes[pos] 0x7) 24;

      unicode |= (utf8Bytes[pos + 1] 0x3F) 18;

      unicode |= (utf8Bytes[pos + 2] 0x3F) 12;

      unicode |= (utf8Bytes[pos + 3] 0x3F) 6;

      unicode |= (utf8Bytes[pos + 4] 0x3F);

      unicodeStr += String.fromCharCode(unicode);

      pos += 5;

    } else if ((flag 0xF0) === 0xF0) {

      unicode = (utf8Bytes[pos] 0xF) 18;

      unicode |= (utf8Bytes[pos + 1] 0x3F) 12;

      unicode |= (utf8Bytes[pos + 2] 0x3F) 6;

      unicode |= (utf8Bytes[pos + 3] 0x3F);

      unicodeStr += String.fromCharCode(unicode);

      pos += 4;

    } else if ((flag 0xE0) === 0xE0) {

      unicode = (utf8Bytes[pos] 0x1F) 12;;

      unicode |= (utf8Bytes[pos + 1] 0x3F) 6;

      unicode |= (utf8Bytes[pos + 2] 0x3F);

      unicodeStr += String.fromCharCode(unicode);

      pos += 3;

    } else if ((flag 0xC0) === 0xC0) { //110

      unicode = (utf8Bytes[pos] 0x3F) 6;

      unicode |= (utf8Bytes[pos + 1] 0x3F);

      unicodeStr += String.fromCharCode(unicode);

      pos += 2;

    } else {

      unicodeStr += String.fromCharCode(utf8Bytes[pos]);

      pos += 1;

    }

  }

  return unicodeStr;

}

JSEncrypt.prototype.decryptLong2 = function (string) {

  var k = this.getKey();

  var MAX_DECRYPT_BLOCK = 128;//分段解密最大长度限制为128字节

  try {

    var ct = "";

    var t1;

    var bufTmp;

    var hexTmp;

    var str = bytesToHex(string); //这块可能有些没有必要，因为sting参数已经及转为byte数组

    var buf = hexToBytes(str);

    var inputLen = buf.length;

    //开始长度

    var offSet = 0;

    //结束长度

    var endOffSet = MAX_DECRYPT_BLOCK;

    //分段解密

    while (inputLen - offSet 0) {

      if (inputLen - offSet MAX_DECRYPT_BLOCK) {

        bufTmp = buf.slice(offSet, endOffSet);

        hexTmp = bytesToHex(bufTmp);

        t1 = k.decrypt(hexTmp);

        ct += t1;

        console.log('分段' + offSet)

        console.log(hexTmp)

        console.log(t1)

      } else {

        bufTmp = buf.slice(offSet, inputLen);

        hexTmp = bytesToHex(bufTmp);

        t1 = k.decrypt(hexTmp);

        ct += t1;

        console.log('分段' + offSet)

        console.log(hexTmp)

        console.log(t1)

      }

      offSet += MAX_DECRYPT_BLOCK;

      endOffSet += MAX_DECRYPT_BLOCK;

    }

    return ct;

  } catch (ex) {

    return false;

  }

};

function arrayBufferToBase64(buffer) {

  var binary = '';

  var bytes = new Uint8Array(buffer);

  var len = bytes.byteLength;

  for (var i = 0; i len; i++) {

    binary += String.fromCharCode(bytes[i]);

  }

  return window.btoa(binary);

}

function base64ToArrayBuffer(base64) {

  var binary_string = window.atob(base64);

  var len = binary_string.length;

  var bytes = new Uint8Array(len);

  for (var i = 0; i len; i++) {

    bytes[i] = binary_string.charCodeAt(i);

  }

  return bytes;

}

const $getrsa = function (password) {

  let encrypt = new JSEncrypt()

  encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----公钥----END PUBLIC KEY-----') // 公钥

  let getrsadata = arrayBufferToBase64(encrypt.encryptLong2(password)); //将加密的数据转码为base64

  return getrsadata //加密后的数据

}

const $decrsa = function (passwords) {

  let encrypt = new JSEncrypt()

  encrypt.setPrivateKey('-----BEGIN PRIVATE KEY-----私钥-----') // 私钥

  let decrsadata = encrypt.decryptLong2(base64ToArrayBuffer(passwords)) // password要解密的数据 先转为byte数组在进行解码

  return decrsadata //解密后的数据

}

后台如果进行分段加密请严格使用117字节划分，前端解析请严格使用128字节划分。

vue中如何做加密登陆

1.首先要了解rsa加密的流程：

第一步返回publicKey前端，用来对password等敏感字段的加密。

第二郑信步，前端进行password敏感字段的加密。

第三步post数据给后端。

第四步用publicKey与privateKey进行解密。

具体如下：喊胡轮

我们可以借助elemetui的表单验证，如下： 

submitForm(formName) {

        this.$refs[formName].validate((valid) = {

          if (valid) {

（在这里请求我的后台加密公做链钥和私钥）

然后对我的登录密码进行rsa加密： let password = RSA(this.publicKeyModulus, this.logUserInfo.password, this.publicKeyExponent)

（ranhou

          } else {

            console.log('error submit!!');

            return false;

          }

        });

关于vuersa加密和vue 加密解密的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。