Блог

Главная - Вопросы по программированию - Не удается вытащить объект пользователя после входа в систему и перейти по нему на главную страницу

Не удается вытащить объект пользователя после входа в систему и перейти по нему на главную страницу

#web #react-redux #react-router #xmlhttprequest #react-props

Вопрос:

Я пытаюсь реализовать простой сайт аутентификации для входа в систему, используя стек mern. Я хочу добиться функциональности, при которой после успешного входа в систему объект пользователя будет отправлен обратно на домашнюю страницу с помощью реквизитов.

APP.JS

 import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { useState } from 'react';
import { Home } from './pages/Home';
import { Signup } from './pages/Signup';
import { Signin } from './pages/Signin';

function App() {

  const [user, setLoginUser] = useState({})  
  console.log(user);
  return (
    <Router>
      <Switch>
        <Route exact path='/' component ={Home}>
          {console.log(user)}
        </Route>
        <Route path='/signup'>
          <Signup />
        </Route>
        <Route path='/signin'>
          <Signin setLoginUser={setLoginUser} />
        </Route>
      </Switch>
    </Router>

  );
}

export default App;

Signin/index.js

 import React from 'react'
import { Header } from '../../components/Header'
import { LoginForm } from '../../components/LoginForm'


/**
* @author
* @function Signin
**/

export const Signin = ({setLoginUser}) => {
    return (
        <>
            <Header />
            <LoginForm setLoginUser={setLoginUser}/>
        </>
    )
};

Я сохраняю объект пользователя как null, когда он не вошел в систему, используя хук useState, и передаю средство обновления в качестве поддержки компоненту входа. Проблема в том, что после успешного входа в систему домашняя страница загружается на секунду, но снова перенаправляется в форму входа. и пользовательский объект обновляется обратно до значения null {} , как это было в начале

LoginForm/index.js

 import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';
// import { Header } from '../../components/Header';
import axios from 'axios';
import { useHistory } from 'react-router';


/**
* @author
* @function LoginForm
**/

export const LoginForm = ({setLoginUser}) => {
    const history = useHistory();
    //function on login
    const login = () => {
        const { email, password } = user;
        if (email amp;amp; password) {
            console.log("valid input", user);
            axios.post("http://localhost:4000/api/login", user)
                .then(response => {
                    console.log(response.data);
                    // setLoginUser(response.data.user);
                    setLoginUser(response.data.user);
                    history.push("/register");
                })
                .catch(error => {
                    console.error('There was an error!', error);
                });
        } else {
            alert('please enter all the fields');
        }
    }

    //user state 
    const [user, setUser] = useState({
        email: "",
        password: ""
    })
    //input change event handler
    const handleChange = (event) => {
        const { name, value } = event.target;
        setUser({
            ...user,
            [name]: value
        })
    }
    return (
        <>
            {console.log("user", user)}
            <Form className="mt-5 p-3 border">
                <Form.Label className="mx-auto">Login</Form.Label>
                <Form.Group className="mb-3" controlId="formBasicEmail">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" name="email" value={user.email} onChange={handleChange} placeholder="Enter email" />
                    <Form.Text className="text-muted">
                        We'll never share your email with anyone else.
                    </Form.Text>
                </Form.Group>
                <Form.Group className="mb-3" controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" name="password" value={user.password} onChange={handleChange} placeholder="Password" />
                </Form.Group>
                <Button variant="primary" type="submit" onClick={login}>
                    Submit
                </Button>
            </Form>
        </>
    );

};

Приставка

 user {email: 'parthkug@iitk.ac.in', password: ''}
index.js:49 user {email: 'parthkug@iitk.ac.in', password: '1'}
index.js:49 user {email: 'parthkug@iitk.ac.in', password: '12'}
index.js:49 user {email: 'parthkug@iitk.ac.in', password: '123'}
index.js:49 user {email: 'parthkug@iitk.ac.in', password: '1234'}
**index.js:49 user {email: 'parthkug@iitk.ac.in', password: '12345'}**
index.js:19 valid input {email: 'parthkug@iitk.ac.in', password: '12345'}
**index.js:22 {message: 'loggedin successfully', user: {…}}
App.js:11 {firstName: 'manvi', lastName: 'kamal', role: 'user', _id: '6134fcef55b3b07a64535e4a', email: 'parthkug@iitk.ac.in', …}
App.js:15 {firstName: 'manvi', lastName: 'kamal', role: 'user', _id: '6134fcef55b3b07a64535e4a', email: 'parthkug@iitk.ac.in', …}**
​ user {email: 'parthkug@iitk.ac.in', password: '12345'}
​ XHR finished loading: POST "http://localhost:4000/api/login".
dispatchXhrRequest @ vendors~main.chunk.js:7315
xhrAdapter @ vendors~main.chunk.js:7160
dispatchRequest @ vendors~main.chunk.js:7784
Promise.then (async)
request @ vendors~main.chunk.js:7571
Axios.<computed> @ vendors~main.chunk.js:7596
wrap @ vendors~main.chunk.js:8126
login @ main.chunk.js:575
callCallback @ vendors~main.chunk.js:25803
invokeGuardedCallbackDev @ vendors~main.chunk.js:25852
invokeGuardedCallback @ vendors~main.chunk.js:25912
invokeGuardedCallbackAndCatchFirstError @ vendors~main.chunk.js:25927
executeDispatch @ vendors~main.chunk.js:30162
processDispatchQueueItemsInOrder @ vendors~main.chunk.js:30194
processDispatchQueue @ vendors~main.chunk.js:30207
dispatchEventsForPlugins @ vendors~main.chunk.js:30218
(anonymous) @ vendors~main.chunk.js:30429
batchedEventUpdates$1 @ vendors~main.chunk.js:44114
batchedEventUpdates @ vendors~main.chunk.js:25601
dispatchEventForPluginEventSystem @ vendors~main.chunk.js:30428
attemptToDispatchEvent @ vendors~main.chunk.js:27911
dispatchEvent @ vendors~main.chunk.js:27829
unstable_runWithPriority @ vendors~main.chunk.js:59078
runWithPriority$1 @ vendors~main.chunk.js:33209
discreteUpdates$1 @ vendors~main.chunk.js:44131
discreteUpdates @ vendors~main.chunk.js:25613
dispatchDiscreteEvent @ vendors~main.chunk.js:27795
Navigated to http://localhost:3000/signin?email=parthkug@iitk.ac.inamp;password=12345
log.js:24 [HMR] Waiting for update signal from WDS...
App.js:11 {}
App.js:15 {}
**index.js:49 user {email: '', password: ''}**

Ответ №1:

Я не уверен на 100%, но почему это происходит history.push("/register") , когда регистрация проходит успешно. Разве так не должно быть history.push("/") ?

В текущем потоке, основанном на том, что я вижу, при успешном входе в систему пользователь снова перенаправляется на страницу входа, что вызывает повторную отправку, и useState вход LoginForm/index.js сбросит состояние

Кроме того, setLoginUser следует использовать как

axios.post().then(() => setLoginUser(response.data.user)) чтобы у вас был объект пользователя на домашней странице

Метки: