Salve a tutti sto creando un piccolo gestionale su react ed ho un problema che si manifesta quando l'utente clicca sul tasto login del form di autenticazione, in pocheparole anche se le credenziali sono giuste ed il parametro che ho creato per verificare l'avvenuta autenticazione (isLogged) è true, il browser non mi redireziona alla dashboard al path "/"
invio il codice così è più chiaro
component Login:
app component:
component context:
protected Route:
invio il codice così è più chiaro
component Login:
JSX:
import { useState, useContext } from "react";
import "./Login.css";
import Axios from "axios";
import { UserContext } from "../../Context/UserContext";
const Login = () => {
const { username, setUsername } = useContext(UserContext);
const { email, setEmail } = useContext(UserContext);
const { password, setPassword } = useContext(UserContext);
const { setUUID } = useContext(UserContext);
const { isLogged, setLogged } = useContext(UserContext);
const [error, setError] = useState("");
const handleClick = async (event) => {
event.preventDefault();
const result = await Axios.post("http://localhost:3005/login", {
email,
username,
password,
});
if (result.data.hasOwnProperty("error")) {
setError(result.data.error);
} else {
setError("");
setUUID(result.data.uuid);
setLogged(true);
console.log(isLogged);
}
};
return (
<form className="login">
<div>
<label htmlFor="email">e-mail</label>
<input
id="email"
type="email"
placeholder="[email protected]"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label htmlFor="username">username</label>
<input
id="username"
type="text"
placeholder="Jhonn123"
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div>
<label htmlFor="password">password</label>
<input
id="password"
type="password"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button onClick={handleClick} disabled={!username || !email || !password}>
Login
</button>
<p
className={error && password ? "login__error" : "login__error--hidden"}
>
{error}
</p>
</form>
);
};
export default Login;
app component:
JSX:
/* eslint-disable no-unused-vars */
import "./App.css";
import {
NutritionistDashboard,
CreatePerson,
Register,
Login,
PrivateRoute,
} from "./components";
import Axios from "axios";
import { useState, useEffect, useContext } from "react";
import {
BrowserRouter as Router,
Route,
Routes,
Navigate,
} from "react-router-dom";
import { UserProvider, UserContext } from "./Context/UserContext";
function App() {
const { isLogged } = useContext(UserContext);
return (
<Router>
<div className="App">
<Routes>
<Route path="/register" element={<Register />} />
<Route path="/create" element={<CreatePerson />} />
<Route path="/login" element={<Login />} />
<Route element={<PrivateRoute />}>
<Route path="/" element={<NutritionistDashboard />} />
</Route>
</Routes>
</div>
</Router>
);
}
export default App;
{
/*<CreatePerson setActive={this.setActive} />*/
}
component context:
JSX:
import { React, createContext, useState } from "react";
export const UserContext = createContext({});
export const UserProvider = ({ children }) => {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [UUID, setUUID] = useState("");
const [isLogged, setLogged] = useState(false);
return (
<UserContext.Provider
value={{
username,
setUsername,
email,
setEmail,
password,
setPassword,
UUID,
setUUID,
isLogged,
setLogged,
}}
>
{children}
</UserContext.Provider>
);
};
protected Route:
JSX:
import { Navigate, Outlet } from "react-router-dom";
import { useContext } from "react";
import { UserContext } from "../../Context/UserContext";
const PrivateRoute = () => {
const { isLogged } = useContext(UserContext);
return (isLogged ? <Outlet /> : <Navigate to="/login" />)
};
export default PrivateRoute;