vue的常用数据加密的使用

目录

1.MD5哈希

2.Base编码

3.AES加密

4.SHA-256哈希

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);
})