Как автоматически выйти из системы, когда срок действия токена jwt истек?

#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 может вернуть некоторое значение, которое установит состояние в хранилище или глобальное состояние. В вашем компоненте приложения или любом другом интеллектуальном компоненте вы можете следить за этим и выйти из системы.