React.js中配置bcryptjs遇问题：密码哈希逻辑异常

问题根源 #

你之前的代码有两个核心问题：

• 调用异步的hashPassword函数时没有加await，直接把返回的Promise赋值给了hashedPassword，再存入state，导致state里存的是Promise而非哈希后的字符串
• 错误地在密码输入时就哈希并覆盖state，这会让输入框显示哈希值，完全不符合用户输入密码的逻辑

正确实现方式 #

正确的做法是在提交注册请求前，对当前的明文密码进行哈希，而不是在输入过程中处理。这样既不会影响用户输入体验，也能保证发送给后端的是哈希后的密码。

修正后的完整代码 #

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import bcrypt from 'bcryptjs'; // 改用ES模块导入方式

const Register = () => {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [address, setAddress] = useState('')
    const [password, setPassword] = useState('')

    async function register() {
        try {
            // 1. 先对明文密码进行哈希处理
            const hashedPassword = await bcrypt.hash(password, 10);
            
            const url = 'http://localhost:5000/customers';
            const object = {
                customer_id: uuidv4(), 
                customer_name: name,
                address: address,
                email: email,
                customer_password: hashedPassword // 使用哈希后的密码
            }
            
            // 2. 发送注册请求
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(object)
            });

            if (!response.ok) {
                throw new Error('注册请求失败');
            }
            
            const result = await response.json();
            console.log('注册成功:', result);
            // 这里可以添加注册成功后的逻辑，比如跳转登录页、清空表单等
        } catch (error) {
            console.error('注册出错:', error);
            // 这里可以添加错误提示，比如给用户显示错误信息
        }
    }

    return (
        <>
            <div>
                <h1>Register</h1>
                <div>
                    <label htmlFor="customer_name">Name: </label> {/* React里要用htmlFor代替for */}
                    <input type="text" name="customer_name" id="customer_name"
                        onChange={(e) => setName(e.target.value)} required />
                </div>
                <div>
                    <label htmlFor="email">Email: </label>
                    <input type="email" name="email" id="email"
                        onChange={(e) => setEmail(e.target.value)} required />
                </div>
                <div>
                    <label htmlFor="address">Address: </label>
                    <input type="text" name="address" id="address"
                        onChange={(e) => setAddress(e.target.value)} />
                </div>
                <div>
                    <label htmlFor="password">Create a new password: </label>
                    <input type="password" name="password" id="password"
                        onChange={(e) => setPassword(e.target.value)} required />
                </div>
                <button type="submit" onClick={register}>Register</button>
                <br />
                <p>Copyright 2022 E-Market</p>
            </div>
        </>
    );
};

export default Register;

关键修改点说明 #

• 移除了错误的useEffect逻辑：不需要在输入密码时就处理哈希，避免干扰用户输入
• 在register函数内哈希密码：点击注册按钮后，先通过await bcrypt.hash拿到哈希后的密码，再构造请求对象
• 添加了错误处理：用try/catch包裹异步逻辑，处理哈希失败或请求失败的情况
• 修正了label的for属性：React中JSX里要使用htmlFor代替原生的for，避免语法冲突

内容的提问来源于stack exchange，提问作者Simone Ghilotti