当前位置: 首页 > article >正文

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.kler.cn/a/594574.html

相关文章:

  • LeetCode hot 100—只出现一次的数字
  • 目标检测YOLO实战应用案例100讲-面向交通复杂目标场景的机器视觉检测技术研究(续)
  • 初识Brainstorm(matlab)
  • 2025年汽车加气站操作工考试精选题库
  • 数据库的两种模式
  • L1-005-008
  • 掌握 Shopee 商品数据:用爬虫解锁无限商机
  • 鸿蒙NEXT开发之开屏广告实现
  • 力扣hot100——三数之和(双指针)
  • SVN 泄露
  • 从模拟到现实:Sensodrive高精度力反馈技术赋能物流运输的高效与安全
  • 【OCR】使用Umi-OCR进行PDF文档的光学字符识别
  • 视频推拉流EasyDSS点播平台云端录像播放异常的问题排查与解决
  • Git 使用笔记
  • Redis常用数据类型深度解析:从理论到最佳实践
  • 宇树科技纯技能要求总结
  • 群体智能优化算法-牛顿-拉夫逊优化算法(Newton-Raphson-Based Optimizer, NRBO,含Matlab源代码)
  • 企业数字化20项目规划建设方案微服务场景与数据应用(50页PPT)(文末有下载方式)
  • 图解AUTOSAR_CP_SOMEIP_TransportProtocol
  • TCP/Socket