У меня есть простое приложение, в котором есть страница входа в систему, и после отправки формы оно отправляет запрос на серверную часть, которая возвращает токен при успешной аутентификации, который затем перенаправляется на внутреннюю страницу панели управления. Существует также еще одна страница, называемая настройками, и еще одна страница NotFound (404).
После входа в систему, когда я нахожусь на странице панели управления или странице настроек, если я обновлюсь, мне потребуется на страницу 404, тогда как она должна оставаться на той странице, на которой я нахожусь. Кто-нибудь знает, в чем может быть проблема?
Вот код:
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 ? (
) : (
)
}
);
}
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
);
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... e-in-react
