Я пытаюсь заставить свой веб-сайт выполнять 3 действия:
После того, как пользователь войдет в систему и получит токен пользователя из API, я сохраню его в sessionStorage.Таким образом, если sessionStorage.getItem ('userToken'), пользователь будет перенаправлен на домашнюю страницу.
Если пользователь вошел в систему, ему не разрешено вернуться к входу в систему.страница, чтобы войти снова.Поэтому, если пользователь попытается зайти в / login, он будет перенаправлен на домашнюю страницу.
Если пользователь выйдет из системы, его токен будет удален из sessionStorage, и он будет перенаправленна страницу входа в систему.
Если я не использую axios в моем header.js для выхода из системы, это работает, но если я добавлю sessionStorage.removeItem ("userToken")внутри axios, это не работает. Пользователь будет перенаправлен на домашнюю страницу, если он щелкнет по выходу из системы в заголовке, только если я обновлю страницу, он будет перенаправлен на страницу входа.
Итак, я чувствую, что проблема заключается в следующем: только когда я получу удачный успешный ответ из бэкэнда, будет выполнена тогда часть sessionStorage.removeItem.Но только когда выполняется removeItem, страница будет перенаправлена из-за части PrivateRoute, поэтому я чувствую, что delete => removeItem является асинхронным, а часть removeItem => PrivateRoute синхронизирована, но каким-то образом на странице входа, из-за if (sessionStorage.getItem('userToken')) {return ()}, он все еще может получить userToken, поэтому он все еще перенаправляет на дом
Как я могу это исправить?Большое спасибо!
header.js
logout = () => {
const auth = sessionStorage.getItem('userToken');
const url = `http://xxxxxx/users/sign_out`;
// sessionStorage.removeItem("userToken"); This works..
axios.delete(url, {
params: { id: auth }
}).then(res => {
sessionStorage.removeItem("userToken");//This not work
}).catch(err => {
console.log(err);
})
signIn.js
constructor() {
super();
this.state = {
redirect: false
};
}
......
render() {
if (this.state.redirect) {
return (<Redirect to={'/'} />)
}
if (sessionStorage.getItem('userToken')) {
return (<Redirect to={'/'} />)
}
return (
<Formik
onSubmit={(values, { setSubmitting }) => {
setSubmitting(true);
axios.post('xxx/users/sign_in', {
user: {
email: values.email,
password: values.password
}
}).then(res => {
sessionStorage.setItem('userToken', res.data.auth_token);
this.setState({ redirect: true });
}).catch(err => {
console.log(err);
alert('wrong email address or password');
setSubmitting(false);
})
}}
......
......
)}
PrivateRoute.js
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
sessionStorage.getItem('userToken') ? <><Header /> <Component {...props} /></> : <Redirect to="/sign-in" />
)} />
)
app.js
<Switch>
<PrivateRoute exact path="/" component={Home}>
</PrivateRoute>
<PrivateRoute exact path="/management" component={Management}>
</PrivateRoute>
<Route exact path="/sign-up" component={SignUpForm}>
</Route>
<Route exact path="/sign-in" component={SignInForm}>
</Route>
<Route component={Error}>
</Route>
</Switch>