Seitenaktualisierung bei tokenauthentifizierten Routenweiterleitungen zur 404-Seite in ReactJavaScript

Javascript-Forum
Guest
 Seitenaktualisierung bei tokenauthentifizierten Routenweiterleitungen zur 404-Seite in React

Post by Guest »

Ich habe eine einfache App mit einer Anmeldeseite, die beim Absenden des Formulars eine Anfrage an das Backend sendet, das bei erfolgreicher Authentifizierung ein Token zurückgibt, das dann zur internen Dashboard-Seite weiterleitet. Es gibt auch eine weitere Seite mit dem Namen „Einstellungen“ und eine andere ist die Seite „NotFound (404)“.
Wenn ich mich nach der Anmeldung auf der Dashboard-Seite oder der Einstellungsseite befinde und eine Aktualisierung durchführe, wird die Seite angezeigt auf die 404-Seite, während es auf der Seite bleiben sollte, auf der ich mich befinde. Weiß jemand, wo das Problem liegen könnte?
Hier ist der Code:

Code: Select all

App.js

const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);

const handleLogin = (token) => {
localStorage.setItem('token', token);

setIsAuthenticated(true);
};

useEffect(() => {
const token = localStorage.getItem('token');

setIsAuthenticated(!!token);
}, []);

return (

{
isAuthenticated ? (





) : (




)
}

);
}

Code: Select all

Login.js

const Login = ({ onLogin }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();

const handleSubmit = async (e) => {
e.preventDefault();

const response = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
});

if (response.ok) {
const result = await response.json();

if (result.success) {
localStorage.setItem('token', result.token);

onLogin(result.token);
navigate('/dashboard');
}
}
};

return (


LOGIN


 setUsername(e.target.value)}
required
/>

 setPassword(e.target.value)}
required
/>


Login




);
}

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post