Проверьте имя пользователя, пароль - Форма входа с использованием React Hooks
Я хочу создать форму входа с массивом данных UsersData.js:
const users = [
{
username: 'admin1',
password: '12345678'
},
{
username:'admin2',
password:'012345678'
}
];
и Login.js выглядит примерно так:
import React, {useState} from 'react';
import { users } from 'UsersData';
function Login() {
const [data, setData] = useState({
username: '',
password: ''
});
const {uname, pass} = data;
const checkUser = () => {
const usercheck = users.find(user => (user.username === uname && user.password === pass));
if (usercheck) {
console.info("Login successful");
}else {
console.info("Wrong password or username");
}
// console.info(uname);
console.info(usercheck);
}
const changeHandler = (e) => {
setData({...data, [e.target.name]:[e.target.value]})
}
const handleSubmit = (e) => {
e.preventDefault();
checkUser();
console.info(checkUser());
}
return (
<div className = "login-bg">
<div className = "card">
<form className='loginForm'
onSubmit = {handleSubmit}
>
<div className = "input-text">
<input
type = "text"
name = "username"
value = {uname}
placeholder = "Username"
aria-describedby = "inputGroupPrepend2" required
onChange = {changeHandler}
/>
</div>
<div className = "input-text">
<input
type = "password"
name = "password"
value = {pass}
placeholder = "Password"
aria-describedby = "inputGroupPrepend2" required
onChange = {changeHandler}
/>
</div>
<div className = "buttons">
<button type = "submit" className = "btn btn-warning btn-block">
Login
</button>
</div>
</form>
</div>
</div>
)
}
export default Login;
Таким образом, приведенный выше код только проверяет, соответствуют ли поля имени пользователя и пароля, введенные в форму, имени и паролю одной записи в массиве объектов UsersData.js. Приведенный выше код работает нормально. Я написал функцию checkUser(), но результат не правда.
Пожалуйста, покажите пример того, как это делается. Извините, я новичок в ReactJS, поэтому немного запутался, надеюсь, вы поможете. Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Привет, осень. Так что способ деструктурирования в первую очередь должен быть значениями, которые вы извлекаете из объекта данных.
Дайте мне знать, является ли это вашей целью?
const { username, password } = data
теперь у нас есть состояние локального компонента имени пользователя и данных
const checkUser = (users) => {
const usercheck = users.find(user => (user.username === username
&& user.password === password))
return usercheck ? console.info('successfully logged in') :
console.info('wrong credentials')
}
затем мы вызываем функцию
checkUser(users)
Я хочу проверить, соответствуют ли поля имени пользователя и пароля, введенные в форму, имени и паролю одной записи в массиве объектов User.js. Я пытался следовать вашему решению. Но результат неверный.
Да, это также рекомендуется делать на бэкенде, и вы должны проверять пользователей в соответствии с данными, которые они отправляют.
Попробуйте пользователя Object.keys(checkUser).length ? 1 ?
вы обновили значения uname и передали значения в форме?
о нет, прости :v
@autumnha <input type = "text" name = "username" value = {username} placeholder = "Username" aria-describedby = "inputGroupPrepend2" требуется onChange = {changeHandler} />, а затем также для пароля: D
проверьте другой ответ, который я отправил, вы каждый раз добавляли массив, а не целевое значение. Я разместил правильное решение для вашей функции handleChangeEvent выше
@autumnha Я вставил код вверху, и все работает, пожалуйста, проверьте
Я думаю, вы можете использовать map() и some() для достижения этой цели. Когда вы проверяете, находится ли один из пользователей в массиве, это сгенерирует массив с истинным и ложным, например [ложным, ложным, истинным] и т. д.
Таким образом, наиболее простым решением является сопоставление пользователей с вашими входными значениями, а затем проверка аутентификации с помощью функции some().
const onCheck = () => {
const {uname, pass} = data;
const isAuthenticated = users.map(user => user.username === uname && user.password === pass);
return isAuthenticated.some();
}
if (onCheck()) {
console.info("Login successful");
}else {
console.info("Wrong password or username");
}
Представьте, что у нас есть большой список пользователей. Вы не думаете, что лучше найти первого пользователя в списке, чем перебирать их всех? :D
ваша логика здесь также неверна, так должно быть обработано событие
import { useEffect, useState } from "react";
import "./styles.css";
const users = [
{
username: 'admin1',
password: '12345678'
},
{
username:'admin2',
password:'012345678'
}
];
export default function App() {
const [data, setData] = useState({
username: '',
password: ''
});
const changeHandler = (e) => {
setData({...data, [e.target.name]: e.target.value})
}
const checkUser = () => {
const usercheck = users.find(user => (user.username === data.username && user.password === data.password));
if (usercheck) {
console.info("Login successful");
}else {
console.info("Wrong password or username");
}
// console.info(uname);
console.info(usercheck);
}
useEffect(() => {
checkUser(users)
}, [data.username, data.password])
console.info(data)
return (
<div className = "App">
<div className = "input-text">
<input
type = "text"
name = "username"
value = {data.username}
placeholder = "Username"
aria-describedby = "inputGroupPrepend2" required
onChange = {changeHandler}
/>
</div>
<div className = "input-text">
<input
type = "password"
name = "password"
value = {data.password}
placeholder = "Password"
aria-describedby = "inputGroupPrepend2" required
onChange = {changeHandler}
/>
</div>
</div>
);
}
Большое спасибо, ваш метод очень разумен.
Проверьте это, это должно решить вашу проблему сейчас? просто вместо использования useEffect используйте onsubmit и вызовите checkUser
да, я знаю, где я ошибся. Спасибо, кодамаче
Просто для ясности: вы знаете, что проверка пароля во внешнем интерфейсе совершенно бесполезна ... И
checkUser()ничего не возвращает, поэтому его результатundefinedдобавитьreturn usercheck !== undefinedв качестве последнего оператора для возвратаtrueилиfalse