Блог

Студент здесь, и мне нужна помощь с проектом react frontend и rail backend. Я не знаю почему, но, несмотря на то, что я ввел неправильные учетные данные в свой логин, я все еще вошел в систему, хотя моя консоль говорит, что это неавторизованно. Любая помощь была бы очень признательна.

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

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

 APP JS
import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom' 
import React, { useState, useEffect } from 'react';
import './App.css';
import Home from './containers/Home'
import NavBar from './components/Navbar'
import Signup from './components/Signup';
import Login from './components/Login';
import Books from './containers/Books';
import Book from './containers/Book';


function App(props) {
  const [loggedIn, setLoggedIn] = useState(false)
  const [user, setUser] = useState({})
  const history = useHistory()

// in order to keep user
  useEffect(() => {
    fetch('/me')
    .then(res => { if (res.ok) { res.json() 
        .then(user => {
          setLoggedIn(true)
          setUser(user)
        })
      }
    })
  }, [])

  // Keep user logged in even if page refreshes
  const userLogin = (user) => {
    setLoggedIn(true)
    setUser(user)
    history.push('/')
  }

// Log out user and set logged in to false, reset set user as well
  const userLogout = () => {
    fetch('/logout', { method: 'DELETE' })
    .then(() => {
      setLoggedIn(false)
      setUser({})
    })
    history.push('/')
  }

  return (
    <div className="App">
      <NavBar user={user} loggedIn={loggedIn} userLogout={userLogout}/>
      <Switch>
        <Route exact path='/' 
        render={routerProps => 
        <Home {...routerProps} 
        user={user} 
        loggedIn={loggedIn} 
        userLogout={userLogout}/>}/>

        <Route exact path='/signup'  
        render={routerProps => 
        <Signup {...routerProps} 
        userLogin={userLogin} 
        setLoggedIn={setLoggedIn}/>}/>

        <Route exact path='/login'  
        render={routerProps => 
        <Login {...routerProps} 
        userLogin={userLogin}
        setLoggedIn={setLoggedIn} />}/>
        
        <Route exact path='/books'  
        render={routerProps => 
        <Books {...routerProps} 
        user={user} 
        loggedIn={loggedIn} />}/>

        <Route path='/books/:id'  
        render={routerProps => 
        <Book {...routerProps} 
        user={user} 
        loggedIn={loggedIn} 
        userLogin={userLogin}/>}/>
      </Switch>
      
    </div>
  );
}

export default App;

 

 LOGIN.JS
import React, { useState, } from 'react'
import { useHistory } from 'react-router-dom' 


const Login = ({userLogin, setLoggedIn}) => {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [errors, setErrors] = useState([])
    const [invaildLogin, setInvalidLogin] = useState(false)
    const history = useHistory()

    const handleSubmit = (e) => {
        // prevents a sending of a post request on submit
        e.preventDefault()
        fetch('/login', {
            method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            username: username,
            password: password
        })})
        .then(res => res.json())
        .then(response => {
            console.log(response)
            if (response.error) {
                setLoggedIn(false)
                setErrors(response.error)
                setInvalidLogin(true)
                
            } else {
                userLogin(response)
                
            }
        })
    }

    if (setLoggedIn === false) {
        history.push('/login')
    } else {
        if (setLoggedIn === true) {
            history.push('/') 
        }
    }

    return (
        <div className='login-container'>
            <h1>LOGIN BELOW:</h1>
            <form onSubmit={handleSubmit}>
                <label>Username:</label>
                <input type='text' id='username' value={username} onChange={(e) => setUsername(e.target.value)}/>
                <br/><br/>
                <label>Password:</label>
                <input type='password' id='password' value={password} onChange={(e) => setPassword(e.target.value)}/>
                <br/><br/>
                <input type='submit' />
                <div>
                    {invaildLogin ? <p className="error"> {errors[0]}</p> : <p> </p>}
                </div>
            </form>
        </div>
    )
}
export default Login