Как сохранить состояние проверки подлинности в приложении express

Question

У меня есть реакционный узел express приложение. На стороне клиента я использую реагирующий маршрутизатор, например:

export default function App() {
  return (
    <div className="App">
      <Router> 
      <MenuBar/>
        <Switch>
          <Route exact path="/" component={Main}/>
          <Route path="/signin" component={SignIn}/>
          <Route path="/signup" component={SignUp}/>
          <Route path="/search" component={Search}/>
          <Route path="/post" component={Post}/>
        </Switch>
      </Router>
    </div>
  );
}

На стороне сервера у меня есть паспорт с использованием локальной стратегии и стратегии Google. После успешного входа в систему, я вижу, что req.user существует на стороне сервера, когда есть ax ios вызов сервера от клиента, поэтому я предполагаю, что это один из способов проверки, если пользователь вошел в систему.

My Вопрос в том, если я хочу, чтобы мое приложение реагирования имело другое поведение, например, в зависимости от состояния входа пользователя, вместо входа в систему вместо кнопки входа используется кнопка «Выход», а URL «/ post» доступен только для пользователя, вошедшего в систему (перенаправление на "/" если пользователь не вошел в систему), как я могу сохранить состояние входа пользователя в систему на стороне клиента?

Насколько я понял, хранение этих данных в Context или Redux будет иметь проблемы при обновлении страницы, так как данные исчезнут после refre sh, верно? Нужно ли использовать

useEffect((//axios call to check auth state)=>,[])

во всех компонентах маршрутизатора и обновлять базу локальных состояний по ответу сервера? Есть ли лучший способ?

Answer 1

localStorage - это лучший способ выполнить такие действия, так как вы должны использовать токен для поддержки сеанса, если нет, тогда используйте его. По одной на каждой странице при попадании любого API, проверка с токеном сеанса с backend. Сохранение значения состояния авторизации в localStorage позволит пользователю получить доступ к другой странице без входа в систему.

Answer 2

Поскольку это сложная проблема, и невозможно написать полное решение. Вот руководство

1. При входе в систему сохраните учетные данные в localStorage, например, accessToken, refre sh token
2. Написать общий код (служба аутентификации) для записи и чтения токенов доступа и информации о пользователе. в localStorage, так что вы можете получить доступ из любого места в приложении
3. Напишите свой пользовательский ProtecteRoute, как тот, который приведен здесь в этой статье https://tylermcginnis.com/react-router-protected-routes-authentication/
4. При выходе очистите свои данные из localStorage использует Auth.logout() и перенаправляет или изменяет состояние, поэтому ProtectedRouter не позволит пользователю попасть на страницы защищенного приложения, поскольку ваши учетные данные были удалены и Auth.isLoggedIn() вернет false.