在前端对 Cookie 进行加密时，你可以使用加密算法对 Cookie 的值进行加密，然后再将加密后的值存储到 Cookie 中。常用的加密算法包括对称加密算法（如 AES）和非对称加密算法（如 RSA）。
以下是一个简单的示例，演示如何在前端使用 AES 对 Cookie 进行加密：
// 引入加密库
import CryptoJS from 'crypto-js';
// 加密密钥
const encryptionKey = 'yourEncryptionKey';
// 加密函数
function encryptCookie(value) {
const encryptedValue = CryptoJS.AES.encrypt(value, encryptionKey).toString();
return encryptedValue;
}
// 解密函数
function decryptCookie(encryptedValue) {
const decryptedValue = CryptoJS.AES.decrypt(encryptedValue, encryptionKey).toString(CryptoJS.enc.Utf8);
return decryptedValue;
}
// 设置 Cookie，先加密再存储到 Cookie 中
function setEncryptedCookie(key, value) {
const encryptedValue = encryptCookie(value);
document.cookie = `${key}=${encryptedValue};`;
}
// 获取 Cookie，先从 Cookie 中取出再解密
function getDecryptedCookie(key) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim().split('=');
if (cookie[0] === key) {
const encryptedValue = cookie[1];
return decryptCookie(encryptedValue);
}
}
return null;
}
// 示例用法
setEncryptedCookie('myCookie', 'sensitiveData');
const decryptedValue = getDecryptedCookie('myCookie');
console.log(decryptedValue); // 输出: sensitiveData
在这个示例中，我们使用了 CryptoJS 库来进行 AES 加密和解密操作。首先定义了一个加密密钥 encryptionKey，然后分别实现了加密函数 encryptCookie 和解密函数 decryptCookie。在设置 Cookie 时，先使用 encryptCookie 加密要存储的值，然后再存储到 Cookie 中；在获取 Cookie 时，先从 Cookie 中取出值，然后再使用 decryptCookie 解密得到原始值。
需要注意的是，尽管使用了加密算法，但由于前端代码可以被用户轻易地查看和修改，因此加密的安全性有限。加密的主要目的是防止明文存储敏感信息，但并不能完全阻止恶意用户篡改或窃取 Cookie。因此，对于敏感信息，仍应该在服务端进行加密和验证。