在 react.js 中設置 bcryptjs 的問題

Question

我試圖在一個反應組件中設置一個注冊頁面，但我想在將響應發送到我的后端之前輸入 hash 密碼。

我對為什么下面的代碼不起作用感到困惑，它返回一個 promise 但它不應該，因為我將登錄包裝在一個異步 function 中並且也被等待。

任何幫助將不勝感激。

import React, { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
/// Error when using bycript ?
var bcrypt = require('bcryptjs');


const Register = () => {

    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [address, setAddress] = useState('')
    const [password, setPassword] = useState('')
    /*
       async function hashPassword(password) {
           const hashedPassword = await bcrypt.hash(password, 10);
           return hashedPassword;
       }
   
       useEffect(() => {
           try {
               const hashedPassword = hashPassword(password);
               setPassword(hashedPassword)
           } catch (error) {
               console.log(error)
           }
           console.log(password)
       }, [password])
   
       TRIED TO USE BCRYPT BUT DID NOT WORK
        */



    async function register() {
        const url = 'http://localhost:5000/customers';
        const object = {
            customer_id: uuidv4(), 
            customer_name: name,
            address: address,
            email: email,
            customer_password: password
        }
        const result = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(object)
        });

        result = await result.json();
    }



    return (
        <>
            <div>
                <h1>Register</h1>
                <div>
                    <label for="customer_name">Name: </label>
                    <input type="text" name="customer_name" id="customer_name"
                        onChange={(e) => setName(e.target.value)} required />
                </div>
                <div>
                    <label for="email">Email: </label>
                    <input type="email" name="email" id="email"
                        onChange={(e) => setEmail(e.target.value)} required />
                </div>
                <div>
                    <label for="address">Address: </label>
                    <input type="text" name="address" id="address"
                        onChange={(e) => setAddress(e.target.value)} />
                </div>
                <div>
                    <label for="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;

Answer 1

hashPassword返回 promise 這就是它不起作用的原因。
但是你不應該將 hash 密碼發送到后端，密碼應該只在數據庫插入時被散列。 更多信息在這里。