JSEncrypt加密和解密使用,及解决字符超出最大限制加密失败问题,详细教程!

JSEncrypt 是一个流行的 JavaScript 库,用于在浏览器中执行 RSA 非对称加密和解密。它通常用于公钥加密和私钥解密,也可以用于签名和验证。它允许在浏览器端进行 RSA 加密,无需依赖服务器端的加密操作。

目录

  1. jsencrypt使用
  2. encryptlong字符超出范围,使用此插件防止加密失败

一、安装 jsencrypt(普通加密,字符较短)

1.使用CDN引入

<script src="https://cdn.rawgit.com/travist/jsencrypt/master/bin/jsencrypt.min.js"></script>

2.通过npm或yarn安装

//方法一
npm install jsencrypt
//方法二
yarn add jsencrypt

3.直接下载:在github上下载jsencrypt.min.js文件

二、公钥加密私钥解密使用案例:(基本使用)

使用公钥加密私钥解密,下方实例:

封装js文件,encryptionService.js

import JSEncrypt from 'jsencrypt';

// 定义公钥
const publicKey = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA7ow+uGV1XUujChlIbyXI
v4d0YRVllGbXsaz15XFlzZldD/J90nMykE2biK9VjLVtYPJ+3XsnbW94G9+hoh60
FgmFkpv9dkkV0PbTKhHkEZl1lnr03aHkZGbq50qgyPpqHUp9ErVZlY7twJzFNO3V
VqHqUoeL9lxDbJl1ybzWoFZjlMeO1df6YmshF6g7GmwMnYqAOw3gPauqgR0RfsIZ
d9zXLO4w5tfpRg3U0Lgjc7MGBdDJhgD0hR71NVlgZUB2HVzF6gz09NYjR8PqxNQv
7cVVdcTUKbAekqUld4MgoHG8rEXE5W7eFDbB26gjkQwChCURe1cP4RRzXl5YFPuQ
MfQwUwIDAQAB
-----END PUBLIC KEY-----`;
//定义私钥
const privateKey = `-----BEGIN PRIVATE KEY-----
MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQHzwmr3a5MyAzwg
eWo3z9MlONJc1wH3jz3XbXImfAyEMdA66eFqTT8y/J9HpVhbbhl5DRAi1//gZC2y
RhbNWaEptCDEdHg/Ve/l3d/MZqNlb3L1GZ58+L5FlA2nHlq9f/Wp6XBOw4T1wOcd
9tQQ7kXYV8mDhM3nZI9ztCHZJMnWbdHjVxj4ZtVFAWe+K0km7OZ5rwMg/pntPcz5
3Q3nt7zmMl2mx7RO9rwsO2yUSdUwFhsMmJdbkNYbZ7wKHrt9CxyQs9g9md9FC2cu
hkbOpr0+K09OSq7r7g+6QKb30+d9gwy0sPMntMjS1HGVJzOn7/J0lZmN36mWzZSh
q6cO7ubSkcCOI6vB9hH5OwL8fnpXKDBF0Wga0pgtfsjkMYHsngzVlf0eyAK+3rJP
Cw+jTZgG4FbTg/ztD2Dfc6BdAv3KmShhRjXwG5VR5ZdbFPVAmK7hTq1+/B7zj/Ah
oW7msEVAJ0ZmMGXM5cplrTfhfl9KKZhvqxF1bVoeMN5KnF3z2d6eIsR5PfJw+knS
tPOpHtvWqvUlS7YntHpe5mLkHbiWhV9rTLpzOa5Kg1zpoRZpOkhQll3uIhzJKLWI
7QebQyBjtE4Idan2I6s/U9Ak0esMSXwCF7lAq2lN+gECc7D6b1TbQsSZFos2Zbfw
gm0eP1k5nJ+0Sl8/qbimHt1k9YLOABJH2z0JpPSEr4H7hO0b/HL6hjmBjwVpGeon
4DX9kduVZb0fUydFwScqOmYP7uQj9z5bhJlCgLHvfA9iBr1XK0VpVZquPq70gFq+
qdAZ25ltwddIz7UoWrrAzjw+6D7kA9FY3J+yxZfLF9DQU3sHtwWxEKcqu6kcg
-----END PRIVATE KEY-----`;

export default {
//加密方法
  encrypt(message) {
    const encrypt = new JSEncrypt();
    encrypt.setPublicKey(publicKey);
    return encrypt.encrypt(message);  // 返回加密后的数据
  },
//解密方法
  decrypt(encryptedMessage) {
    const decrypt = new JSEncrypt();
    decrypt.setPrivateKey(privateKey);
    return decrypt.decrypt(encryptedMessage);  // 返回解密后的数据
  }
};

三、公钥加密私钥解密使用案例:(解决长字符加密失败问题)

1.安装encryptlong插件

npm install encryptlong

2.使用公钥加密私钥解密,下方实例:

封装js文件,encryptionService.js

const { JSEncrypt } = require('encryptlong')

// 定义公钥
const publicKey = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA7ow+uGV1XUujChlIbyXI
v4d0YRVllGbXsaz15XFlzZldD/J90nMykE2biK9VjLVtYPJ+3XsnbW94G9+hoh60
FgmFkpv9dkkV0PbTKhHkEZl1lnr03aHkZGbq50qgyPpqHUp9ErVZlY7twJzFNO3V
VqHqUoeL9lxDbJl1ybzWoFZjlMeO1df6YmshF6g7GmwMnYqAOw3gPauqgR0RfsIZ
d9zXLO4w5tfpRg3U0Lgjc7MGBdDJhgD0hR71NVlgZUB2HVzF6gz09NYjR8PqxNQv
7cVVdcTUKbAekqUld4MgoHG8rEXE5W7eFDbB26gjkQwChCURe1cP4RRzXl5YFPuQ
MfQwUwIDAQAB
-----END PUBLIC KEY-----`;
//定义私钥
const privateKey = `-----BEGIN PRIVATE KEY-----
MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQHzwmr3a5MyAzwg
eWo3z9MlONJc1wH3jz3XbXImfAyEMdA66eFqTT8y/J9HpVhbbhl5DRAi1//gZC2y
RhbNWaEptCDEdHg/Ve/l3d/MZqNlb3L1GZ58+L5FlA2nHlq9f/Wp6XBOw4T1wOcd
9tQQ7kXYV8mDhM3nZI9ztCHZJMnWbdHjVxj4ZtVFAWe+K0km7OZ5rwMg/pntPcz5
3Q3nt7zmMl2mx7RO9rwsO2yUSdUwFhsMmJdbkNYbZ7wKHrt9CxyQs9g9md9FC2cu
hkbOpr0+K09OSq7r7g+6QKb30+d9gwy0sPMntMjS1HGVJzOn7/J0lZmN36mWzZSh
q6cO7ubSkcCOI6vB9hH5OwL8fnpXKDBF0Wga0pgtfsjkMYHsngzVlf0eyAK+3rJP
Cw+jTZgG4FbTg/ztD2Dfc6BdAv3KmShhRjXwG5VR5ZdbFPVAmK7hTq1+/B7zj/Ah
oW7msEVAJ0ZmMGXM5cplrTfhfl9KKZhvqxF1bVoeMN5KnF3z2d6eIsR5PfJw+knS
tPOpHtvWqvUlS7YntHpe5mLkHbiWhV9rTLpzOa5Kg1zpoRZpOkhQll3uIhzJKLWI
7QebQyBjtE4Idan2I6s/U9Ak0esMSXwCF7lAq2lN+gECc7D6b1TbQsSZFos2Zbfw
gm0eP1k5nJ+0Sl8/qbimHt1k9YLOABJH2z0JpPSEr4H7hO0b/HL6hjmBjwVpGeon
4DX9kduVZb0fUydFwScqOmYP7uQj9z5bhJlCgLHvfA9iBr1XK0VpVZquPq70gFq+
qdAZ25ltwddIz7UoWrrAzjw+6D7kA9FY3J+yxZfLF9DQU3sHtwWxEKcqu6kcg
-----END PRIVATE KEY-----`;

export default {
//加密方法
  encryptLong(message) {
    const encrypt = new JSEncrypt();
    encrypt.setPublicKey(publicKey);
    return encrypt.encryptLong(message);  // 返回加密后的数据
  },
//解密方法
  decryptLong(encryptedMessage) {
    const decrypt = new JSEncrypt();
    decrypt.setPrivateKey(privateKey);
    return decrypt.decryptLong(encryptedMessage);  // 返回解密后的数据
  }
};

四、最终代码,组件中使用

<template>
  <div>
    <h1>RSA 加密和解密</h1>
    <input v-model="message" placeholder="输入消息进行加密" />
    <button @click="handleEncrypt">加密</button>
    <button @click="handleDecrypt">解密</button>
    <button @click="handleEncryptLong">长字符加密</button>
    <button @click="handleDecryptLong">长字符解密</button>

    <div>
      <p><strong>加密后的数据:</strong>{{ encryptedData }}</p>
      <p><strong>解密后的数据:</strong>{{ decryptedData }}</p>
      <p><strong>长字符加密后的数据:</strong>{{ encryptedLongData}}</p>
      <p><strong>长字符解密后的数据:</strong>{{ decryptedLongData}}</p>
    </div>
  </div>
</template>

<script>
// 导入加密服务
import encryptionService from './encryptionService';

export default {
  data() {
    return {
      message: '',//需要加密或解密的测试内容
      encryptedData: '',//普通字符加密
      decryptedData: '',//普通字符解密
      encryptedLongData: '',//长字符加密
      decryptedLongData: ''//长字符解密
    };
  },
  methods: {
    handleEncrypt() {
      this.encryptedData = encryptionService.encrypt(this.message);  // 使用加密服务进行加密
    },
    handleDecrypt() {
      this.decryptedData = encryptionService.decrypt(this.encryptedData);  // 使用解密服务进行解密
    },
//长字符加密
    handleEncryptLong() {
      this.encryptedLongData= encryptionService.encryptLong(this.message);  // 使用加密服务进行加密
    },
//长字符解密
    handleDecryptLong() {
      this.decryptedLongData= encryptionService.decryptLong(this.encryptedData);  // 使用解密服务进行解密
    }
  }
};
</script>

<style scoped>
input {
  padding: 8px;
  margin: 10px 0;
  width: 300px;
}
button {
  margin: 5px;
  padding: 8px 16px;
  cursor: pointer;
}
pre {
  background-color: #f5f5f5;
  padding: 10px;
  margin-top: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值