#reactjs
Вопрос:
У меня есть 5 страниц, и я сохранил токен JWT в локальном хранилище, на каком экране я должен написать код для автоматического выхода из системы и каким будет код в react
App.js
<BrowserRouter>
<Switch>
<Route exact path='/signup' component={Signup} />
<Route exact path='/signin' component={Signin} />
<ProtectedRoutes exact path='/' component={Home} />
<ProtectedRoutes exact path='/profile' component={Profile} />
<ProtectedRoutes exact path='/about' component={About} />
<ProtectedRoutes exact path='/accounts' component={Accounts} />
<ProtectedRoutes component={Signin} />
</Switch>
</BrowserRouter>
Страница регистрации
export default function Signin() {
const submitData = async (data)=>{
const apiData= await postSigninData(data)
localStorage.setItem('token', apiData.data)
}
return (
<Box>
<h1> Signin Page</h1>
</Box>
)
}
Ответ №1:
Это не должно быть связано с конкретной страницей. Если у вас нет возможности обновить токен, то при вызове любого защищенного api с истекшим сроком действия токена вы должны получить неудачный ответ для токена с истекшим сроком действия. Тогда вам нужно будет написать там свою логику выхода из системы. Если вы можете проверить свой токен перед отправкой в любой api , вы можете вернуть статус и действовать в соответствии с ним.
Таким образом, идея не относится к конкретной странице. Если у вас есть настройка API redux или контекстного API , ваш неудачный API может вернуть некоторое значение, которое установит состояние в хранилище или глобальное состояние. В вашем компоненте приложения или любом другом интеллектуальном компоненте вы можете следить за этим и выйти из системы.