目录
1.MD5哈希:可以生成唯一固定长度的哈希值,是广泛使用的哈希算法,不可以逆,需使用js-md5库,不适合用作密码存储,可用于数据的摘要,例如商品的sku唯一值
安装:
pnpm install js-md5 --save
使用:
import md5 from "js-md5";
const pageData: any = reactive<{
mdMessageOld: any;
mdMessage: any;
}>({
mdMessageOld: "",
mdMessage: ""
});
const {
mdMessageOld,
mdMessage
} = toRefs(pageData);
const md5HashFn = ciphertext => {
return md5(ciphertext);
};
onMounted(() => {
pageData.mdMessage = md5HashFn(pageData.mdMessageOld);
console.info("md5哈希的消息:", pageData.mdMessage);
})
2.Base编码:不是一种加密方法,而是一种编码方法,它将二进制数据转换成文本数据的表示形式。Base64 编码是一种将二进制数据转换为文本数据的方法,不是用于加密或隐藏数据的方法。Base64 编码是可逆的,但它不提供任何安全性保障,因此不应该用于加密敏感数据
使用:
const pageData: any = reactive<{
baseBtoaOld: any;
baseBtoa: any;
baseAtob: any
}>({
baseBtoaOld: "sbsbsf",
baseBtoa: "",
baseAtob: ""
});
const {
baseBtoaOld,
baseBtoa,
baseAtob
} = toRefs(pageData);
// base64编码
const baseBtoaMessageFn = ciphertext => {
return btoa(ciphertext);
};
// base64解码
const baseAtobMessageFn = ciphertext => {
return atob(ciphertext);
};
onMounted(() => {
pageData.baseBtoa = baseBtoaMessageFn(pageData.baseBtoaOld);
pageData.baseAtob = baseAtobMessageFn(pageData.baseBtoa);
console.info("base编码后的消息:", pageData.baseBtoa);
console.info("base解码后的消息:", pageData.baseAtob);
})
3.AES加密:是一种对称加密算法,广泛用于保护敏感数据的安全性。在前端(比如在Vue.js项目中),你可以使用现有的加密库来实现AES加密。一个常用的JavaScript库是 crypto-js,拥有可密钥的时候相当于可逆,就是AES的加密和解密
安装:
pnpm install jsencrypt --save
使用:
import CryptoJS from "crypto-js";
const pageData: any = reactive<{
originalMessage: any;
encryptionKey: any;
encryptedMessage: any;
decryptedMessage: any;
}>({
originalMessage: "Hello, world!",
encryptionKey: "goto_w",
encryptedMessage: "",
decryptedMessage: "",
});
const {
originalMessage,
encryptionKey,
encryptedMessage,
decryptedMessage,
} = toRefs(pageData);
// 加密函数
const encryptMessageFn = (message, key) => {
// AES 加密
// message加密的消息 key加密的密钥
const ciphertext = CryptoJS.AES.encrypt(message, key).toString();
return ciphertext;
};
// 解密函数
const decryptMessageFn = (ciphertext, key) => {
// AES 解密
// ciphertext解密的消息 key解密的密钥
const bytes = CryptoJS.AES.decrypt(ciphertext, key);
const originalText = bytes.toString(CryptoJS.enc.Utf8);
return originalText;
};
onMounted(() => {
pageData.encryptedMessage = encryptMessageFn(pageData.originalMessage, pageData.encryptionKey); // 加密消息
console.info("加密后的消息:", pageData.encryptedMessage);
pageData.decryptedMessage = decryptMessageFn(pageData.encryptedMessage, pageData.encryptionKey); // 解密消息
console.info("解密后的消息:", pageData.decryptedMessage);
})
注意:CryptoJS.AES.encrypt(message, key).toString() 的参数,第一个参数是加密的消息,第二个是加密密钥;CryptoJS.AES.decrypt(ciphertext, key)的参数,第一个参数是解密的消息,第二个是解密密钥
若要加密一下对象则可用以下方法(配合深拷贝方法JSON.stringify):
// 加密函数
function encryptObject(obj, key) {
// 将对象序列化为 JSON 字符串
const plaintext = JSON.stringify(obj);
// AES 加密
const encrypted = CryptoJS.AES.encrypt(plaintext, key).toString();
return encrypted;
}
// 解密函数
function decryptObject(encrypted, key) {
// AES 解密
const bytes = CryptoJS.AES.decrypt(encrypted, key);
const decryptedData = bytes.toString(CryptoJS.enc.Utf8);
// 将 JSON 字符串解析为对象
const decryptedObj = JSON.parse(decryptedData);
return decryptedObj;
}
// 示例对象
const dataObject = {
id: 1,
name: 'Alice',
email: 'alice@example.com'
};
// 加密密钥,注意安全存储和管理密钥
const encryptionKey = 'your_secret_key';
// 加密对象
const encryptedObject = encryptObject(dataObject, encryptionKey);
console.log('Encrypted:', encryptedObject);
// 解密对象
const decryptedObject = decryptObject(encryptedObject, encryptionKey);
console.log('Decrypted:', decryptedObject);
4.SHA-256哈希:是一种哈希算法,用于生成数据的固定长度(256位或32字节)的哈希值。安全的哈希算法,通常用于密码存储和数字签名,需使用crypto-js
库,难以逆向,适合数据完整性验证
安装:
pnpm install jsencrypt --save
使用:
import CryptoJS from "crypto-js";
const pageData: any = reactive<{
originalMessage: any;
irreversibleMessage: any;
}>({
originalMessage: "Hello, world!",
irreversibleMessage: ""
});
const {
originalMessage,
irreversibleMessage,
} = toRefs(pageData);
// 不可逆加密
const irreversibleMessageFn = ciphertext => {
const shaMessageText = CryptoJS.SHA256(ciphertext).toString(CryptoJS.enc.Hex);
return shaMessageText;
};
onMounted(() => {
pageData.irreversibleMessage = irreversibleMessageFn(pageData.originalMessage);
console.info("不可逆解密后的消息:", pageData.irreversibleMessage);
})