【Vue】前端Crypto-js加密库md5加密转成二进制/十六进制/Base64格式

MD5是一种常用的哈希函数,用于生成数据的消息摘要,在前端开发中,我们经常需要对数据进行加密,以确保数据的安全性。

Crypto-js是一个常用的JavaScript加密库,它提供了MD5算法的实现,并且支持将加密结果转换为不同的格式,包括二进制、十六进制和Base64等。

步骤一:安装Crypto-js库

首先,我们需要在项目中安装Crypto-js库。你可以使用npm或者yarn进行安装:

npm install crypto-js
或
yarn add crypto-js
步骤二:导入Crypto-js库

在你的前端代码中,导入Crypto-js库:

import CryptoJS from 'crypto-js';
步骤三:使用MD5算法进行加密

接下来,我们可以使用Crypto-js提供的MD5算法对数据进行加密:

const str = 'Hello, LYQ!'; 
const md5Hash = CryptoJS.MD5(str);
步骤四:将加密结果转换为不同格式

Crypto-js支持将加密结果转换为不同格式,包括十六进制和Base64等(不支持二进制)。以下是将加密结果转换为不同格式的示例代码:

  • 将加密结果转换为二进制格式:
function execute() {const str = 'Hello, LYQ!'; const md5Hash = CryptoJS.MD5(str);const hexHash = md5Hash.toString(CryptoJS.enc.Hex);const binaryHash = hexToBinary(hexHash);console.log(binaryHash);
}function hexToBinary(hexString) {let binaryString = "";for (let i = 0; i < hexString.length; i++) {const binaryValue = parseInt(hexString[i], 16).toString(2).padStart(4, '0');binaryString += binaryValue;}return binaryString;
}
  • 将加密结果转换为十六进制格式:
function execute() {const str = 'Hello, LYQ!'; const md5Hash = CryptoJS.MD5(str);const hexHash = md5Hash.toString(CryptoJS.enc.Hex);console.log(hexHash);
}
  • 将加密结果转换为Base64格式:
function execute() {const str = 'Hello, LYQ!'; const md5Hash = CryptoJS.MD5(str);const base64Hash = md5Hash.toString(CryptoJS.enc.Base64);console.log(base64Hash);
}

通过以上步骤,我们可以在前端使用Crypto-js库进行MD5加密,并将加密结果转换为不同格式。这样我们就可以根据具体需求,选择合适的格式来处理加密后的数据。

在实际项目中,加密和格式转换是保护数据安全的重要步骤,希望这篇文章能够帮助你更好地理解和应用Crypto-js库。

不管做什么,只要坚持下去就会看到不一样!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/814374.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++_ 头指针在链表的操作中用来标识链表的起始位置

链表&#xff08;linked list&#xff09;是一种常见的数据结构&#xff0c;用于存储一系列元素。它由一系列节点组成&#xff0c;每个节点包含数据和指向下一个节点的指针。 在 C 中&#xff0c;可以使用结构体来表示链表节点&#xff0c;然后使用指针将这些节点连接起来。 -…

kafka学习记录

文章目录 windows单机版kafka搭建步骤主题的增删改查操作消息的生产与消费 Windows集群版kafka搭建步骤 prettyZoo 尚硅谷Kafka教程&#xff0c;2024新版kafka视频&#xff0c;零基础入门到实战 【尚硅谷】Kafka3.x教程&#xff08;从入门到调优&#xff0c;深入全面&#xff0…

分库分表-简单了解

通过下面这些文章&#xff0c;我知道了什么是分库分表&#xff0c; 以及 什么时候需要分库分表&#xff0c; 还有分库分表带来的问题。 我说MySQL单表超过2000w就要分库分表&#xff0c;面试官让我回去等通知&#xff1f; 目前还没有学习到分布式&#xff0c;微服务&#xf…

plsql developer 一键格式化sql/美化sql

PL/SQL 格式化工具 以 Oracle SQL Developer 为例&#xff0c;使用一键格式化的步骤如下&#xff1a; 打开 Oracle SQL Developer。在“文件”菜单中&#xff0c;选择“打开文件”&#xff0c;然后选择你的 PL/SQL 文件。打开文件后&#xff0c;你可以通过右键菜单选择“格式…

vue3 知识点的补充 之 第一节

01 vue2与vue3的区别 vue2 采用object.defuneProperty()实现 对数组不友好 重写了数组的方法&#xff0c;同时无法监听数组length长度的改变。对于对象只能劫持设置好的数据 新增需要使用vue.set vue3 采用proxy进行代理&#xff0c;不需要重写数组的方法 同时可以监听数组长度…

gdb相关指令

背景知识 通过上图&#xff0c;可以看到&#xff0c;gcc 和 g 默认形成的可执行程序是release的&#xff01;&#xff01;&#xff01;故无法直接被调试。因此带 -g 选项表示使用 Debug 模式进行编译&#xff0c;而且我们可以看到&#xff0c;Debug 模式下编译形成的可执…

OSCP靶场--ClamAV

OSCP靶场–ClamAV 考点 1.nmap扫描 ##┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC 192.168.153.42 -p- -Pn --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-13 10:01 EDT Nmap scan report for 192.168.153.42 Host is up (0.24s latency). N…

ssl认证 生成证书的代码 java

网上流行的 InstallCert.java&#xff0c;应该出自于官网。但现在也找不到了&#xff0c;只能找到2011年的一篇文章&#xff08;在文章底下的参考链接&#xff09;。 以下是生成证书的代码&#xff1a; import java.io.BufferedReader; import java.io.File; import java.io.…

题目一 搭建电商平台WordPress

创建VPC01和VPC02&#xff0c;两个安全组&#xff08;按考试时拓扑图中实际要求的名称来创建&#xff0c;可能VPC 的名称是&#xff1a;web-active, db&#xff0c;上海容灾的VPC名称是&#xff1a; web-dril1&#xff09;&#xff0c;安全组要求最小化放行&#xff0c;包括业务…

033. 字母异位词分组

给定一个字符串数组 strs &#xff0c;将 变位词 组合在一起。 可以按任意顺序返回结果列表。 注意&#xff1a;若两个字符串中每个字符出现的次数都相同&#xff0c;则称它们互为变位词。 示例 1: 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出…

Ubuntu去除烦人的顶部【活动】按钮

文章目录 一、需求说明二、打开 extensions 网站三、安装 GNOME Shell 插件四、安装本地连接器五、安装 Hide Activities Button 插件六、最终效果七、卸载本地连接器命令参考 本文所使用的 Ubuntu 系统版本是 Ubuntu 22.04 ! 一、需求说明 使用 Ubuntu 的过程中&#xff0c;屏…

VNC Viewer 连接远程主机及常见错误处理(The connection closed unexpectedly)

搭建可接收vnc连接的环境 1、下载镜像 https://github.com/fcwu/docker-ubuntu-vnc-desktop 该镜像是含有ubuntu 通过docker运行的桌面环境&#xff0c;并接受vnc 的连接 docker pull dorowu/ubuntu-desktop-lxde-vnc 2、运行容器 1&#xff09;只暴露容器的80端口&#…

二叉树练习day.9

669.修剪二叉搜索树 链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变…

多模态 Multi-Module的创新点

最近在改论文 用了多模态 记得最早找创新点时 记录了关于多模态相关的一些值得深入研究的方向 记录于此 希望分享交流 *注:多模态不止多信息源; 除了不同的感知模态(如视觉、听觉、触觉等)之外,多模态还可以涉及到不同的数据表示、不同的特征空间、不同的数据类型等…

【从零单排Golang】第十六话:channel的用法和基本原则

在基于Golang的后端开发中&#xff0c;channel是一个必须要掌握的并发编程概念。和python的queue一样&#xff0c;channel在不同的goroutine里承担着传递信息的作用&#xff0c;使得业务逻辑的状态上下文可以在不同的goroutine中共享。今天&#xff0c;我们就来看一下channel的…

C语言隐藏执行其他程序

WinExec函数 #include<windows.h> int main() {WinExec("notepad.exe", SW_HIDE);return 0; }SW_HIDE 隐藏SW_SHOW 显示 ShellExecute函数 在C语言中使用ShellExecute函数可以执行外部程序&#xff0c;比如打开一个文件、运行一个程序等。 #include <wi…

Singleton单例设计模式详解

目录 模式定义应用场景实现方式1.懒汉模式&#xff1a;2.饿汉模式&#xff1a;3.静态内部类反射如何防止反射攻击破坏&#xff1f; 枚举类型序列化 部分源码中的应用定位Spring & JDKTomcat反序列化指定数据源 模式定义 保证一个类只有一个实例&#xff0c;并且提供一个全…

pytorch车牌识别

目录 使用pytorch库中CNN模型进行图像识别收集数据集定义CNN模型卷积层池化层全连接层 CNN模型代码使用模型 使用pytorch库中CNN模型进行图像识别 收集数据集 可以去找开源的数据集或者自己手做一个 最终整合成 类别分类的图片文件 定义CNN模型 卷积层 功能&#xff1a;提…

Chatgpt掘金之旅—有爱AI商业实战篇|播客剧本写作|(十三)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 一、AI技术创业播客剧本写作服务有哪些机会&#xff1f; 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。…

b站江科大stm32笔记(持续更新)

b站江科大stm32笔记&#xff08;持续更新&#xff09; 片上资源/外设引脚定义表启动配置推挽开漏oc/od 门漏极/集电极 电阻的上拉下拉输入捕获输入捕获通道主从触发模式输入捕获基本结构PWMI基本结构PWMPSC ARR CRR输入捕获模式测频率TIM_PrescalerConfig()初始化输入捕获测频法…