前端实现uuid及crypto加密

本文介绍了前端实现生成uuid 和使用crypto-js对密码进行加密的做法,需要的小伙伴可以自取哈~

1. 手动实现uuid

    1. 生成带有前缀的UUID字符串
    1. 存储UUID的每个字符的数组
    1. 用于生成十六进制字符的字母表
    1. 循环36次,生成UUID的每个字符
    1. 随机选择一个索引作为当前字符的值
    1. 将选定的字符添加到数组中
    1. 设置UUID的特定位置的字符
    1. 在特定位置添加连字符
    1. 将字符数组连接成最终的UUID字符串
    1. 返回带有前缀的UUID字符串
ts 复制代码
// 生成带有前缀的UUID字符串
export const generateUuid = (): string => {
  // 存储UUID的每个字符的数组
  const s: string[] = [];
  
  // 用于生成十六进制字符的字母表
  const hexDigits: string = `0123456789abcdef`;
  
  // 循环36次,生成UUID的每个字符
  for (let i: number = 0; i < 36; ++i) {
    // 随机选择一个索引作为当前字符的值
    const start: number = Math.floor(Math.random() * 0x10);
    
    // 将选定的字符添加到数组中
    s[i] = hexDigits.slice(start, start + 1);
  }
  
  // 设置UUID的特定位置的字符
  s[14] = `4`;
  
  const start = (Number(s[19]) & 0x3) | 0x8;
  s[19] = hexDigits.slice(start, start + 1);
  
  // 在特定位置添加连字符
  s[8] = s[13] = s[18] = s[23] = `-`;
  
  // 将字符数组连接成最终的UUID字符串
  const uuid: string = s.join(``);
  
  // 返回带有前缀的UUID字符串
  return `supcon-${uuid}`;
};

2. 使用crypto-js加密

  • 生成密钥
  • 初始化向量
  • 将加密内容转成字节数组
  • 使用CBC模式加密
  • 使用Pkcs7方式填充
  • 返回加密之后的字符串
ts 复制代码
import CryptoJS from "crypto-js"; // @4.1.2

/**
 * 对内容进行加密处理
 * @param {any} content - 要加密的内容
 * @returns {string} - 加密后的字符串
 */
function encryptContent(content:any): string {
  let encryptedContent = content ?? ''; // 如果 content 为 null 或 undefined,则将其置为空字符串

  const secretKey = CryptoJS.enc.Utf8.parse("6e3d84fa5adb"); // 密钥
  const initializationVector = CryptoJS.enc.Utf8.parse("742cd20a079cd"); // 初始化向量
  const byteArray = CryptoJS.enc.Utf8.parse(encryptedContent); // 将要加密的内容转换为字节数组
  const encrypted = CryptoJS.AES.encrypt(byteArray, secretKey, {
    iv: initializationVector, // 设置初始化向量
    mode: CryptoJS.mode.CBC, // 使用 CBC 模式进行加密
    padding: CryptoJS.pad.Pkcs7, // 使用 Pkcs7 填充方式
  });

  return encrypted.toString(); // 返回加密后的字符串
}
相关推荐
小poop4 小时前
CSS 基础与实战:从入门到精通网页美化
前端
Csvn6 小时前
运行时性能
前端
Never_every996 小时前
位图转矢量工具哪个好?实测抠抠图AI位图转矢量工具
大数据·前端
paopaokaka_luck7 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
空中湖7 小时前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
欣欣之王来了9 小时前
原始HTML插值:v-html指令的使用与安全风险
前端·学习·架构·项目·vue3教程
IT_陈寒9 小时前
Redis的LRU淘汰策略坑了我一整天
前端·人工智能·后端
计算机魔术师9 小时前
砍半价格、参数再涨,国产旗舰追到 Opus 鼻尖了
前端
特立独行的猫A9 小时前
10 MB 的桌面 AI 客户端:用仓颉 + 系统 WebView 替代 Electron
前端·harmonyos
修炼的dance10 小时前
白底图存JPG,sharp开mozjpeg背景杂点少近三成
前端