前端使用 crypto-js库AES加解密

前端使用 crypto-js库AES加解密

为什么需要前端加密？

现在项目使用http协议，且登录界面的用户登录密码是明文传输，项目真正上线后，存在信息泄露风险。
所以准备用前端框架加密处理用户输入的密码再传输。

crypto-js 库

crypto-js 是一个纯 JavaScript 实现的加密库，支持 AES、SHA、HMAC 等算法，兼容浏览器和 Node.js 环境。

加密和解密的基本步骤

1、 安装 crypto-js 库

npm install crypto-js

yarn add crypto-js

2、引入 crypto-js 库： 在你的 Vue 组件或其他 JavaScript 文件中引入 crypto-js：

import CryptoJS from 'crypto-js';

3、AES 加密： 使用 CryptoJS.AES.encrypt 方法进行加密。你需要提供要加密的数据和密钥。

// 要加密的数据
const data = 'Hello, World!';
// 密钥
const key = 'my-secret-key-12345';

// 加密
const encrypted = CryptoJS.AES.encrypt(data, key).toString();
console.log('Encrypted:', encrypted);

4、AES 解密： 使用 CryptoJS.AES.decrypt 方法进行解密。同样需要提供密文和密钥。

// 解密
const bytes = CryptoJS.AES.decrypt(encrypted, key);
const decryptedData = bytes.toString(CryptoJS.enc.Utf8);
console.log('Decrypted:', decryptedData);

5、注意事项：
密钥的安全性非常重要，不要在客户端暴露敏感的密钥。
加密后的数据通常以 Base64 编码的形式存在，便于传输和存储。
根据需要，可以使用更复杂的加密模式和填充方式，crypto-js 支持多种模式，如 CBC、CFB、OFB 等。

应用

// 对密码进行加密
const encryptedPassword = CryptoJS.AES.encrypt(loginForm.password, 'abcdefgh12345678').toString()