React如何导入md5,把密码password进行md5加密

 

在 React 项目里对密码进行 MD5 加密,你可以借助 crypto-js 库,它提供了 MD5 加密功能。以下是详细步骤:

1. 安装 crypto-js 库

在项目根目录下,通过以下命令来安装 crypto-js :

npm install crypto-js

2. 在 React 组件中导入并使用 MD5 加密

文件里,你可以按照下面的方式导入并使用 MD5 加密:

// ... existing code ...
import CryptoJS from 'crypto-js'; // 导入 crypto-js 库export default function Login() {// ... existing code ...const onFinish = async (values) => {console.log("用户名:", values.username);// 对密码进行 MD5 加密const encryptedPassword = CryptoJS.MD5(values.password).toString(); console.log("加密后的密码:", encryptedPassword);console.log("验证码:", values.captcha);console.log("所选角色:", values.selectedRole);try {// 发送登录请求,使用加密后的密码const response = await post('/login/validate', {account: values.username,password: encryptedPassword, // 使用加密后的密码captcha: values.captcha,company_id: values.selectedRole,captchaKey: captchaData.captchaKey,});console.log('登录响应:', response);// 模拟登录成功后跳转到主页navigate("/home");} catch (error) {console.error('登录失败:', error);}};// ... existing code ...
}

加密密码 :在 onFinish 函数里,借助 CryptoJS.MD5(values.password).toString() 对密码进行 MD5 加密,然后把加密后的密码传递给登录请求。

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

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

相关文章

【ES】Elasticsearch学习

文章目录 简单的安装 简单的安装 参考:https://blog.csdn.net/smilehappiness/article/details/118466378 官网:https://www.elastic.co/guide/en/elasticsearch/reference/current/targz.html 下载:https://www.elastic.co/cn/downloads/e…

Cool Request:可以统计任意方法耗时

什么是Cool Request Cool Request是一个IDEA中的接口调试插件,除了可以发起基本的HTTP请求之外,还提供了强大的反射调用能力,可以绕过拦截器,这点广受网友的好评,当然伴随着还有Spring中对Scheduled注解的调用&#x…

dfs(二十二)78. 子集

78. 子集 给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的 (幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1: 输入:nums [1,2,3] 输出:[[],[1],[2],[1,2]…

什么是TCP,UDP,MQTT?

以下内容来源于抖音,作者织点代码,读者根据文章内容以及相应论文添加自己的理解进行注释。 计算机之间怎么通信? 彼此之间用网线连接在一起就可以了 但是这样子太麻烦了,成本太高,操作也麻烦 集线器 于是我们可以把线拧在一起 而拧在一起的这个设备,就是集线器 但集线…

计算机操作系统(三) 操作系统的特性、运行环境与核心功能(附带图谱更好对比理解))

计算机操作系统(三) 操作系统的特性、运行环境与核心功能 前言一、操作系统的基本特性1.1 并发1.2 共享1.3 虚拟1.4 异步 二、操作系统的运行环境2.1 硬件支持2.2 操作系统内核2.3 处理机的双重工作模式2.4 中断与异常 三、操作系统的主要功能3.1 处理机…

k8s搭建kube-prometheus

后续再补一个k8s集群搭建的博客,从0开始搭建k8s集群。使用kube-prometheus非常方便,主要问题只在于拉取镜像。除了拉取镜像外其他时间5分钟即可。耐心等待拉取镜像。 一.kube-prometheus简介 kube-prometheus 是一个专为 Kubernetes 设计的开源监控解决…

QT网页显示的几种方法及对比

一.直接跳转打开网页 1.使用QDesktopServices::openUrl调用系统浏览器 原理:直接调用操作系统默认浏览器打开指定URL,不在应用程序内嵌入网页。 优点: 实现简单,无需额外模块或依赖。 适用于仅需跳转外部浏览器的场景。 缺点&…

【Java SE】抽象类/方法、模板设计模式

目录 1.抽象类/方法 1.1 基本介绍 1.2 语法格式 1.3 使用细节 2. 模板设计模式(抽象类使用场景) 2.1 基本介绍 2.2 具体例子 1.抽象类/方法 1.1 基本介绍 ① 当父类的某些方法,需要声明,但是又不确定如何实现时&#xff…

Python数据可视化工具:六西格玛及其基础工具概览

在当今数据驱动的时代,数据分析和可视化工具成为了各行业优化流程、提升质量的关键手段。六西格玛(Six Sigma)作为一种以数据为基础、追求完美质量的管理理念,其实施依赖于一系列基础工具的灵活运用。而Python,凭借其强…

调试 Rust + WebAssembly 版康威生命游戏

1. 启用 Panic 日志 1.1 让 Panic 信息显示在浏览器控制台 如果 Rust 代码发生 panic!(),默认情况下不会在浏览器开发者工具中显示详细的错误信息。这使得排查问题变得困难。 我们可以使用 console_error_panic_hook 这个 Rust crate,将 Panic 信息打…

网络编程中客户端与服务器的搭建与协议包应用

1.客户端的搭建 2.服务器搭建 3.TCP中的粘包现象 tcp协议为了提高发送的效率,会将短时间连续发送的小数据,当做一组数据统一发送 原理是: tcp协议本身存在一个1500字节的缓存区,tcp协议每次write发送数据的时候,总是…

微博ip属地不发微博会不会变

随着社交媒体的普及,微博作为其中的佼佼者,一直备受关注。而且微博上线了显示用户IP属地的功能,这一功能旨在减少冒充热点事件当事人、恶意造谣、蹭流量等不良行为,确保传播内容的真实性和透明度。然而,这也引发了一些…

【初探数据结构】树与二叉树

💬 欢迎讨论:在阅读过程中有任何疑问,欢迎在评论区留言,我们一起交流学习! 👍 点赞、收藏与分享:如果你觉得这篇文章对你有帮助,记得点赞、收藏,并分享给更多对数据结构感…

Neo4j GDS(Graph Data Science)库安装(Mac版)

Neo4j GDS(Graph Data Science)库安装(Mac版) Neo4j GDS库安装(Mac版) Neo4j GDS(Graph Data Science)库安装(Mac版)前言GDS(Graph Data Science&…

DeepSeek 3FS 与 JuiceFS:架构与特性比较

近期,DeepSeek 开源了其文件系统 Fire-Flyer File System (3FS),使得文件系统这一有着 70 多年历时的“古老”的技术,又获得了各方的关注。在 AI 业务中,企业需要处理大量的文本、图像、视频等非结构化数据,还需要应对…

《南京日报》专题报道 | 耘瞳科技“工业之眼”加码“中国智造”

在江宁开发区,机器人已不再是科幻电影里的遥远想象,他们就像人类的“同事”,在工地上忙着贴砖、刷墙、搬运、检测; 在体育训练场上帮助运动员矫正姿势; 在医院里帮助医生发现帕金森早期征兆,在智慧工厂里…

SpringBoot最佳实践之 - 使用AOP记录操作日志

1. 前言 本篇博客是个人在工作中遇到的需求。针对此需求,开发了具体的实现代码。并不是普适的记录操作日志的方式。以阅读本篇博客的朋友,可以参考此篇博客中记录日志的方式,可能会对你有些许帮助和启发。 2. 需求描述 有一个后台管理系统…

投影算子(Projection Operator)的定义、性质、分类以及应用

文章目录 1. 投影算子的定义2. 投影算子的几何意义3. 一些简单的例子例 1:二维平面上的投影例 2:投影到一条任意方向的直线例 3:三维空间中投影到一个平面 4. 投影算子的性质4.1、幂等性(Idempotency): P 2…

VLAN综合实验报告

一、实验拓扑 网络拓扑结构包括三台交换机(LSW1、LSW2、LSW3)、一台路由器(AR1)以及六台PC(PC1-PC6)。交换机之间通过Trunk链路相连,交换机与PC、路由器通过Access或Hybrid链路连接。 二、实验…

coding ability 展开第五幕(二分查找算法)超详细!!!!

. . 文章目录 前言二分查找搜索插入的位置思路 x的平方根思路 山脉数组的峰顶索引思路 寻找旋转排序数组中的最小值思路 总结 前言 本专栏上篇博客已经把滑动指针收尾啦 现在还是想到核心——一段连续的区间,有时候加上哈希表用起来很爽 今天我们来学习新的算法知识…