ts加密md5码封装

Vue3项目里用MD5加密登录密码,我踩了ts-md5和js-md5两个坑 本文详细介绍了在Vue3项目中实现MD5加密登录密码的实战经验,对比分析了ts-md5和js-md5两个库的优缺点,并提供了类型声明问题的解决方案。文章还分享了Vue3中的最佳实践,包括封装可组合函数、性能优化和安全增强建议,帮助开发者避免常见陷阱,优雅地实现密码加密功能。 阅读详情

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

test:

let str = Md5.Instance.get_md5("123456");
console.log(str)

//len:32
//e10adc3949ba59abbe56e057f20f883e

md5.ts

class Md5 {
  private static _inst: Md5;
  public static get Instance(): Md5 {
    return this._inst || (this._inst = new Md5());
  }
  public get_md5(str: string): string {
    return this.md5(str);
  }
  split(target: string | any[], step: number, markString: boolean = typeof target === "string") {
    if (typeof target === "string") target = target.split("");
    let result: any[] = target.map(
      (_, index: number) =>
        index % step === 0
          ? Array.from(Array(step).keys()).map((x: number) => target[index + x])
          : []
    )
      .filter((x: any[]) => x.length > 0);
    if (markString) result = result.map((x: any[]) => x.join(""))
    return result;
  }
  padding(str: string | any[], length: number, char: string, tail: boolean = true, isArray: boolean = Array.isArray(str)) {
    let arr;
    if (Array.isArray(str)) {
      arr = str;
    } else {
      arr = str.split("");
    }
    const paddingStr: any[] = this.range(length - str.length).map(() => char);
    const result = tail ? arr.concat(paddingStr) : paddingStr.concat(arr);
    return isArray ? result : result.join("");
  }
  little_endian(charCode: number) {
    return this.split(this.padding(charCode.toString(16), 8, "0", false), 2).reverse().join("");
  }
  range(...args: number[]) {
    const start: number = args.length === 1 ? 0 : args[0];
    const end: number = args.length === 2 ? args[1] : args[0] - 1;
    return Array.from(Array(end - start + 1).keys()).map((x: number) => x + start);
  }
  to_binary(code: number, bit: number = 8, max: number = Math.pow(2, bit) - 1) {
    if (code < 0) throw new Error("code should be greater than: 0");
    if (code > max) throw new Error("code should be less than: " + max);
    return this.padding(code.toString(2), bit, "0", false);
  }
  to_hex(code: number, bit: number = 8, max: number = Math.pow(16, bit) - 1) {
    if (code < 0) throw new Error("code should be greater than: 0");
    if (code > max) throw new Error("code should be less than: " + max);
    return this.padding(code.toString(16), bit, "0", false);
  }
  to_code(str: string) {
    if (str.substr(0, 2).toLowerCase() === "0b") return parseInt(str.substr(2, 8), 2);
    if (str.substr(0, 2).toLowerCase() === "0x") return parseInt(str.substr(2, 8), 16);
  }
  utf16_to_utf8(str: string) {
    return str.split("").map((char: string) => this.utf8_encode(char)).join("");
  }
  utf8_encode(char: string) {
    let utftext = "";
    const c = char.charCodeAt(0);
    if (c < 128) {
      utftext += String.fromCharCode(c);
    } else if ((c > 127) && (c < 2048)) {
      utftext += String.fromCharCode((c >> 6) | 0b11000000);
      utftext += String.fromCharCode((c & 0b00111111) | 0b10000000);
    } else {
      utftext += String.fromCharCode((c >> 12) | 0b11100000);
      utftext += String.fromCharCode(((c >> 6) & 0b00111111) | 0b10000000);
      utftext += String.fromCharCode((c & 0b00111111) | 0b10000000);
    }
    return utftext;
  }
  uint_add(...args: number[]) {
    const t = Uint32Array.from([0]);
    const x = Uint32Array.from(args);
    x.forEach(n => t[0] = t[0] + n);
    return t[0];
  }
  loop_shift_left(n: number, bits: number) {
    return (n << bits) | (n >>> (32 - bits));
  }
  A = 0x67452301;
  B = 0xefcdab89;
  C = 0x98badcfe;
  D = 0x10325476;
  F(b: number, c: number, d: number) {
    return (b & c) | (~b & d);
  }
  G(b: number, c: number, d: number) {
    return (b & d) | (c & ~d);
  }
  H(b: number, c: number, d: number) {
    return b ^ c ^ d;
  }
  I(b: number, c: number, d: number) {
    return c ^ (b | ~d)
  }
  S = [
    7, 12, 17, 22, 7, 12, 17, 22, 7, 12, 17, 22, 7, 12, 17, 22,
    5, 9, 14, 20, 5, 9, 14, 20, 5, 9, 14, 20, 5, 9, 14, 20,
    4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23,
    6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21
  ]
  T(i: number) {
    return Math.floor(Math.pow(2, 32) * Math.abs(Math.sin(i + 1)));
  }
  x_index(i: number) {
    if (i >= 0 && i <= 15) return i;
    if (i >= 16 && i <= 31) return (5 * i + 1) % 16;
    if (i >= 32 && i <= 47) return (3 * i + 5) % 16;
    if (i >= 48 && i <= 63) return (7 * i) % 16;
    return 0;
  }
  wrap(m: any) {
    return (a: number, b: number, c: number, d: number, x: number, s: number, t: number) => {
      // 循环左移
      return this.uint_add(this.loop_shift_left(this.uint_add(a, m(b, c, d), x, t), s), b);
    };
  }
  porcess_message(str: string) {
    const length = str.length;
    const length_of_zero = Math.ceil(length / 64) * 64 - length - 8 - 1;
    str += String.fromCharCode(0b10000000);
    const strArray = this.padding(str.split(""), length + 1 + length_of_zero, String.fromCharCode(0));
    const tail = this.split(this.padding(this.to_binary(length * 8 % Math.pow(2, 64)), 64, "0"), 8).map(x => parseInt(x, 2));
    const head = (strArray as any[]).map(x => x.charCodeAt(0));
    return Uint32Array.from(
      this.split(head.concat(tail), 4)
        .map(x =>
          x.map((t: number) => this.padding(t.toString(16), 2, "0", false)).join("")
        )
        .map(x => parseInt(x, 16))
        .map(x => parseInt(this.little_endian(x), 16))
    )
  }
  fghi(i: number) {
    if (i >= 0 && i <= 15) return this.F;
    if (i >= 16 && i <= 31) return this.G;
    if (i >= 32 && i <= 47) return this.H;
    if (i >= 48 && i <= 63) return this.I;
  }
  fghi_wrapped(i: number) {
    return this.wrap(this.fghi(i));
  }
  //------------------------------------------------
  md5(str: string) {
    str = this.utf16_to_utf8(str);
    const uint32_array = this.porcess_message(str);
    const result = Uint32Array.from([this.A, this.B, this.C, this.D]);
    const chunks = this.split(Array.from(uint32_array), 16);
    for (const chunk of chunks) {
      const a = result[0];
      const b = result[1];
      const c = result[2];
      const d = result[3];
      for (let i = 0; i < 64; i++) {
        result[(4 - i % 4) % 4] = this.fghi_wrapped(i)(result[(4 - i % 4) % 4], result[((4 - i % 4) + 1) % 4], result[((4 - i % 4) + 2) % 4], result[((4 - i % 4) + 3) % 4], chunk[this.x_index(i)], this.S[i], this.T(i))
      }
      result[0] = a + result[0];
      result[1] = b + result[1];
      result[2] = c + result[2];
      result[3] = d + result[3];
    }
    return Array.from(result).map(x => this.little_endian(x)).join("").toLowerCase();
  }
}
别再只用MD5了!Vue3项目密码加密实战:从ts-md5到js-md5的完整踩坑记录 本文深入探讨了Vue3项目中密码加密的最佳实践,对比分析了ts-md5和js-md5的优缺点,并提供了从基础使用到性能优化的完整解决方案。针对MD5在现代前端开发中的合理应用场景,文章还介绍了安全增强措施和替代方案,帮助开发者在保证性能的同时提升数据安全性。 阅读详情

相关推荐

关于blob加密视频的基于m3u8和ts文件下载转MP4视频的python爬虫实现

关于blob加密视频的基于m3u8和ts文件下载转MP4视频的python爬虫实现 首先谈一下这篇文章主要的爬虫对象,基本上都是一些视频网站(一些大厂会有自己独特的编码风格需要自行破解加密格式,所以很难实现,所以这篇文章主要针对于一些小网站)。 下面先说一下blob加密的实现,可以参考这篇博客(https://blog.youkuaiyun.com/xingyun89114/article/details/80699527) 总结来说呢,其实就是HTTP请求后的数据做blob加密,上篇博客我们也可以在开发者模式中的ne

weixin_41084548的博客 4867

md5加密-ts

md5加密-ts

nihuitingshuo的博客 1754

Vue3项目实战:用ts-md5给登录密码加密,保姆级配置教程(含TypeScript避坑指南)

本文详细介绍了在Vue3+TypeScript项目中使用ts-md5进行登录密码加密的实战教程。从MD5加密原理出发,涵盖方案选型、生产级安全配置、性能优化到现代化替代方案,提供完整的TypeScript避坑指南和最佳实践,帮助开发者构建安全的密码处理流程。

weixin_28675661的博客 324

【亲测免费】 TypeScript MD5加密库(ts-md5)使用教程

TypeScript MD5加密库(ts-md5)使用教程 项目介绍 ts-md5 是一个专为TypeScript设计的MD5加密库,它提供了简单直观的接口来计算字符串的MD5散列值。此库能够处理Unicode字符串,并且支持增量哈希功能。通过这个库,开发者能够在TypeScript项目中轻松实现数据的加密需求,保证信息的安全传输或存储。ts-md5基于MIT许可协议开放源码,便于集成到各种 Ty...

gitblog_00603的博客 2408

ts-md5:Type Script MD5实现

介绍 TypeScript的MD5实现 可以处理Unicode字符串 支持增量哈希 使用文件和Blob 该库还包含用于以下目的的工具: 散列文件或Blob 一个用于执行哈希的Webworker Webworker处理程序,用于请求对文件或Blob进行哈希处理 基于承诺 文件或Blob排队等待在Webworker上进行处理 根据工作 约瑟夫·迈尔斯(Joseph Myers): : 安德烈·克鲁兹(AndréCruz): : 雷蒙德·希尔(Raymond Hill): : 用法 基本哈希 导入课程import {Md5} from 'ts-md5/dist/md5'; 哈希一些东西 Md5.hashStr('blah blah blah') =>十六进制:字符串 Md5.hashStr('blah blah blah', true) => raw:Int32Array

TypeScript MD5类

做游戏时 需要MD5 签名的,可以下载使用。

md5 加密长度_MD5散列值加密

平凡也就两个字: 懒和惰;成功也就两个字: 苦和勤;优秀也就两个字: 你和我。跟着我从0学习JAVA、spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美!每一篇文章都是心得总结,跟我学习你就是大牛!MD5散列值加密1 md5加密简介 MD5(Message-Digest Algorithm 5),即消息摘要算法第五版,是一种被广泛使用的密码散列函数...

weixin_39636253的博客 1598

md5.ts egret直接使用的加密代码

md5.ts egret直接使用的加密代码

MD5加密工具类封装

public class Md5Utils { //参数1:输入明文密码 public static String getMd5Code(String password){ StringBuilder sb = null; try { //创建加密对象 //参数1: 算法名字 MessageDigest messageDigest = MessageDigest.g...

weixin_45080954的博客 330

遗传病变异注释预测工具安装系列之------Exomiser 安装及bug处理

Exomiser是一个Java程序,它从全外显子组或全基因组测序数据中发现潜在的致病变异。 Java 版本必须为1.8以上。 Exomiser 最新版本下载 wget -c https://github.com/exomiser/Exomiser/releases/download/11.0.0/exomiser-cli-11.0.0-distribution.zip unzip ...

qq_37329349的博客 1537

第8.1节 满足构网要求的功率器件与散热设计

摘要: 构网型变流器的功率器件选型与散热设计面临严苛要求,需综合考虑过载能力、暂态应力与可靠性。IGBT模块选型需重点评估电压/电流等级、损耗特性及结温波动,而SiC MOSFET虽具有高频低损耗优势,但面临栅极可靠性等挑战。散热设计需采用液冷等先进技术控制结温波动,并通过电热应力仿真和寿命预测实现可靠性优化。系统化选型流程需结合规范要求、工况谱分析和实测验证,为构网型变流器提供坚实的物理基础。

技术工作者 915

Springboot学习-MD5盐值密码加密 DigestUtils 和 BCryptPasswordEncoder

Springboot学习-MD5盐值密码加密 DigestUtils和BCryptPasswordEncoder 使用场景:当需要从后端向数据库中存储密码类型的信息时,可以采取可逆加密或不可逆加密.

NeverGiveUp 5163

【Ambari-Metrics监控】Grafana+Infinity快速构建DEMO-实战教学

摘要:本文介绍了如何通过Infinity插件在Grafana中监控Ambari-Metrics(AMS)的CPU核数指标。内容包括配置AMS REST API数据源、创建Dashboard面板、设置JSON解析规则,将时间戳和数值映射为时序数据。最终实现单个节点CPU核数曲线的可视化展示,该方法可扩展至其他AMS指标监控。文章提供了完整的配置示例和API调用验证方法,适用于Grafana 9.x及以上版本对接Ambari集群监控场景。

TTBIGDATA的博客 1352

vue+ts+element 引入md5加密

2、在需要的页面引入即可,我的是放着全局的request封装处(不需要添加文件,或者在其他文件里添加任何引入文件)1、安装依赖md5.ts (注意 不是md5.js)3、应用 (括号内的加密参数根据需要自行填写)

qq_40334370的博客 843

陀螺仪选型避坑指南:为什么IMU660RA是智能车竞赛的性价比之选?

本文针对智能车竞赛场景,提供陀螺仪选型避坑指南,并深度解析为何IMU660RA成为性价比之选。文章指出,竞赛选型应避免盲目追求高性能“黑盒”模块,而应注重原始数据获取与算法开发。IMU660RA以其良好的常温稳定性、适中的噪声水平、极致的性价比和丰富的生态支持,成为帮助参赛者深入理解姿态解算原理、进行“白盒开发”的理想教学与实践平台。

tech5的博客 883

STM32F103中GPIO_Remap1_CAN1与GPIO_Remap2_CAN1的配置差异与应用场景解析

本文深入解析了STM32F103中GPIO_Remap1_CAN1与GPIO_Remap2_CAN1的配置差异与应用场景。通过剖析AFIO_MAPR寄存器,明确了两者在引脚映射(PB8/PB9 vs PD0/PD1)和适用封装上的区别,并提供了详细的配置步骤、常见陷阱排查及基于项目需求的选型指南,帮助开发者高效完成CAN引脚重映射。

u6v7w8x的博客 397

vite+vue3+ts中md5的使用

在vite+vue3+ts中使用md5的封装配置

weixin_58142746的博客 3282

【Claude】权限被拒绝 (Permission Denied) 全场景排查 — 已解决

权限配置是 Claude Code 安全使用的核心机制。通过合理的 allow/deny 规则、正确的通配符使用、子代理独立配置、定期安全审计,可以在保证安全性的同时不影响开发效率。deny 优先:deny 规则优先级高于 allow,先保护敏感资源通配符精确单层匹配,**递归匹配,Bash(cmd*)允许带参数最小权限:只允许必要的操作,避免Bash(*)等危险规则CI 用 skip:Headless 模式用避免挂起子代理独立:每个子代理单独配置权限,不自动继承保护密钥:deny.env。

一键难忘的博客 3950

vue aes 和 md5 加密解密和区别

1.首先介绍下aes如何使用 首先确保有node.js 运行命令: npm install crypto-js --save 然后在src文件夹下新建js文件夹,目录结构如下: 在until.js里面引入crypto-js,然后封装加密和解密的函数。 接着在需要用到加解密的文件中引入until.js import utils from '@/js/utils.js' 做个演示: 我在页面创建后执行data函数,打印结果如下: 2.介绍下md5的使用方法 npm安装: npm install --s

wangongchao的博客 1791

智能车浅谈 电磁组——环岛处理

第十七届全国大学生智能车电磁四轮部分经验分享

qq_41954556的博客 1万+

从零开始学习CANoe(三)—— 系统变量的创建和使用

从零开始学习CANoe(三)—— 系统变量的创建和使用

蚂蚁小兵 1万+

加密解密库:AES/RSA/MD5等算法的ArkTS封装(238)

场景:在文件上传或下载完成后,通过计算文件的 MD5 哈希值来校验文件在传输过程中是否发生损坏或被篡改。采用流式update方式避免将整个大文件加载到内存中。// 每次读取 2KBdo {

Davina_yu的博客 172

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

VUX 中 md5 工具函数的使用指南:基于 blueimp-md5 的消息摘要封装与安全边界

`md5` 是 VUX(基于 Vue 与 WeUI 的移动端 UI 组件库)在 [tools 工具集](https://link.gitcode.com/i/4c69c7e5dac1ffd1623c5b95da946c53) 中提供的一个纯函数工具,它直接依赖并重新导出成熟的 `blueimp-md5` 库,让你在 Vue 项目中通过一行 `import { md5 } from 'vux'` 即

gitblog_01200的博客 470

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

cocos2d-x加密MD5/SHA1/BASE64

一、常用加密情况有三种 : 1. 资源加密,如图片,音乐(防盗版) 2. 网络传输过程中的加密,避免被人拦截并修改数据(防作弊) 3. 游戏数据加密(防作弊) 二、加密作用:防止盗版,防止作弊。 三、常见加密方式 : MD5 MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由Mit Laboratory for Com

Norton的专栏 9307

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Vue3 项目实战:MD5加密在用户登录模块的应用与优化

本文详细介绍了在Vue3项目中使用MD5加密技术优化用户登录模块的实战经验。通过对比`ts-md5`和`js-md5`两种库的优缺点,提供了完整的加密解决方案,包括Pinia状态管理、路由守卫验证以及性能优化技巧。文章还探讨了前端加密的局限性,并给出了增强安全性的实用建议,帮助开发者构建更安全的登录系统。

weixin_30905133的博客 370

React Native开源封装AES,MD5加密模块(react-native-encryption-library)

本文来自:江清清的技术专栏(http://www.lcode.org) 开源项目地址:https://github.com/jiangqqlmj/react-native-encryption-library 项目介绍 昨天自己封装了常用的加密方式例如:MD5,AES加密,供React Native进行使用,不过当前项目适配Android平台。 刚创建的React Nati

大灰狼的小绵羊哥哥的博客 4370
上一篇: iframe子页面获取父页面的点击事件
下一篇: 实现iframe父窗体与子窗体的通信
leoxiaoge
博客等级 码龄10年 17粉丝 36原创
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

leoxiaoge

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值