0

我有一个应用程序，用户可以在其中跟踪食品卡车。在用户仪表板上，用户可以更新他们的位置。确认位置更新后，客户端向后端发送 .put 请求。问题是 .put 请求正在更新用户帐户对象的每个值（即 id、用户名、电子邮件、密码和位置）。

在此处输入图像描述

在允许用户更改其位置的输入中，唯一被修改的值是位置。但是，我认为也存在更改密码的错误。密码存储为哈希值。因此，当发出 put 请求时，我认为位置更新 onClick 正在为用户传递密码的哈希值，然后更改数据库中的密码。当我尝试使用刚刚更改其位置的用户登录时，我收到一条错误消息，提示凭据无效。我怎么解决这个问题？：

这是有问题的操作：

// edit location for diners
export const editLocation = (changes, id) => dispatch => {
    dispatch({ type: EDIT_LOCATION_START })
    axiosWithAuth()
        .put(`https://foodtrucktrackr.herokuapp.com/api/diner/${id}`, changes)
        .then(res => {
            console.log(res);
            dispatch({ type: EDIT_LOCATION_SUCCESS, payload: res.data })
        })
}

DinerDash.js（仅压缩为相关行）：

const DinerDash = props => {

    const [locationEditMode, setLocationEditMode] = useState(false);

    const [updatedAccount, setUpdatedAccount] = useState({
        id: props.id,
        username: props.username,
        email: props.email,
        password: props.password,
        location: ''
    })

    const changeLocation = e => {
        console.log(updatedAccount);
        e.preventDefault();
        props.editLocation(updatedAccount, props.id);
        setLocationEditMode(false);
    }

    const handleLocationChange = e => {
        setUpdatedAccount({
            ...updatedAccount,
            location: e.target.value
        })
    }

    return (
        <div>
            <h1>This is the diner Dashboard component</h1>
            <h2>Welcome, {accountInfo.username}</h2>
            <p>
                Find trucks near: {props.location}
                <ArrowDropDownCircleIcon 
                    className="location-edit-icon" 
                    onClick={() => setLocationEditMode(!locationEditMode)}
                />
            </p>
            {locationEditMode && <div>
                <input placeholder="Enter a new location" onChange={handleLocationChange}/>
                <button onClick={changeLocation}>Done</button>
            </div>}
            <br />
            <button onClick={logout}>Logout</button>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        id: state.account.id,
        username: state.account.username,
        email: state.account.email,
        password: state.account.password,
        location: state.account.location
    }
}

来自减速器的代码：

case EDIT_LOCATION_START:
            return {
                ...state,
                isLoading: true
            }
        case EDIT_LOCATION_SUCCESS:
            return {
                ...state,
                isLoading: false,
                account: {
                    id: action.payload.id,
                    username: action.payload.username,
                    email: action.payload.email,
                    password: action.payload.password,
                    location: action.payload.location
                }

来自后端的代码：

// how diners edit account
router.put('/:id', (req, res) => {
    const { id } = req.params;
    let updatedDiner = req.body;
    updatedDiner.id = id;
    const hash = bcrypt.hashSync(updatedDiner.password, 8);
    updatedDiner.password = hash;

    diners.editDiner(updatedDiner, id)
        .then(updated => {
            res.status(200).json(updated);
        })
        .catch(err => {
            console.log(err);
            res.status(500).json({ errorMessage: 'An error occured while updating account' });
        })
})
4

1 回答 1

1

尝试发送一个空密码，当密码没有变化时，保留一个单独的密码变量而不是默认密码密钥，在后端检查它是否不为空，然后继续。

后端：

router.put('/:id', (req, res) => {
    const { id } = req.params;
    let updatedDiner = req.body;
    updatedDiner.id = id;
    if (updatedDiner.password){
         const hash = bcrypt.hashSync(updatedDiner.password, 8);
         updatedDiner.password = hash;
       }
    else
   {
         delete updatedDiner.password
    }

    diners.editDiner(updatedDiner, id)
        .then(updated => {
            res.status(200).json(updated);
        })
        .catch(err => {
            console.log(err);
            res.status(500).json({ errorMessage: 'An error occured while updating account' });
        })
})
于 2020-03-11T08:22:09.837 回答