Я реализовал вход / выход в своем веб-приложении с помощью redux. Если адрес электронной почты и пароль верны, токен сохраняется в хранилище redux, и пользователь перенаправляется на частный маршрут /panel. Я использую persist, чтобы информация сохранялась в localStorage (хотя она и не видна).
Когда пользователь нажимает кнопку выхода, токен, возвращаемый из действия выхода, равен нулю. Пользователь возвращается на страницу входа и больше не может получить доступ к частным маршрутам. Однако, если вместо выхода я просто закрою приложение, когда я вернусь в следующий раз, privateRoutes все еще будет доступен, просто добавив /panel к ссылке, поскольку токен все еще присутствует.
Как я могу изменить его так, чтобы даже при закрытии приложения пользователь автоматически выходил из системы? Я читал о том, что я могу использовать useEffect для очистки токена, но я не уверен, как и где именно я могу это сделать. Должен ли я сделать еще одно действие? Поскольку у меня уже есть один для выхода, это не имеет смысла.
Это мой частный маршрут:
export const PrivateRoute = ({ component, ...rest }: any) => {
const routeComponent = (props: any) => {
if (store.getState().token) {
console.log("From private routing: ", store.getState().token);
return React.createElement(component, props);
} else {
return <Redirect to={{ pathname: "/404" }} />;
}
};
return <Route {...rest} render={routeComponent} />;
};
Вот окно с кодами, показывающее, как я полностью реализовал выход:
https://codesandbox.io/s/damp-mountain-qk8x2?file= / src / helpers / privateRouting.tsx: 114-508