前端数据加密的简单使用

在前端使用JSEncrypt进行加密是一种常见的做法，它可以帮助保护数据在客户端到服务器的传输过程中的安全性。以下是使用 JSEncrypt 进行前端加密的基本步骤：

一、安装

npm install jsencrypt

二、封装加密和解密方法

新建jsencrypt.js文件，在文件内封装加密和解密的方法，我这里选用的生成密钥位数为512位(bit)。密钥对的生成可以使用这个网站在线生成：在线生成非对称加密公钥私钥对、在线生成公私钥对、RSA Key pair create、生成RSA密钥对--查错网

// jsencrypt.js
import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

// 密钥对生成 http://web.chacuo.net/netrsakeypair

const publicKey = `MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAK1cGwNJ03cwgesi53yeI3xf/+BXrEz2
BYSUKcdC0cDKq8HT1LlF7z11Qfl7M/H9vaTx2Nxi1PZcaUIpNmMym0kCAwEAAQ==`

const privateKey = `MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEArVwbA0nTdzCB6yLn
fJ4jfF//4FesTPYFhJQpx0LRwMqrwdPUuUXvPXVB+Xsz8f29pPHY3GLU9lxpQik2
YzKbSQIDAQABAkBLvkRnKWhlWSJKdBOkFQv4GZGYmXXEonFCveGLGBzBGJOZOhre
YMu3hFQeqXQ5ThYDvZrCEXDT/5LxF+ZZH8AJAiEA3oq/XWy5PTTGcvuxjhrSDssf
Mkl5H9ufj4604EtQcRcCIQDHbGvQJQSfE9J77Q4WdxODomndT2ANfpSp6twRa/VS
nwIgQPgmyCKerdTDfvwmKQOBgdohIHA80WUv3xxdiAHU2T8CIQCiWs+PXoPbqryi
7cSZX4pAkbpUVanicpo/l5hgip7oCwIgfN5EUg7QN+3C+fxl+W9NC4HaNW65S88w
yQQyL9b0w2A=`

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

三、使用封装方法

在需要进行加密解密的地方引入并使用即可，示例代码如下：

// App.vue
<script setup>
// 引入方法
import { encrypt, decrypt } from './utils/jsencrypt';
// 加密
 let input = "hello";
 console.log("加密后：",encrypt(input));
// 解密
let input = "hello";
console.log("加密后：",encrypt(input));

</script>

四、注意事项：

• 确保公钥和私钥的安全性，不要将它们暴露给未授权的访问者。
• 加密和解密操作需要一定的计算资源，应尽量避免在客户端进行大规模的加密和解密操作，以免影响页面性能。
• 敏感数据应该在服务器端进行加密，前端加密更多是为了防止数据在传输过程中被窃取。