Советы по аутентификации React

Question

У меня есть вопрос, и он может дублироваться, и мне очень жаль, если это так.

У меня есть приложение, которое реагирует, и Nodejs бэкэнд.

Мой вопрос касается аутентификации, и если я делаю это наилучшим образом.

что у меня есть:

Логин , регистрирует пользователя, устанавливает HTTP-куки и затем перенаправляет на страницу приложения:

const Login = ({ loginUser, history }) => {
  const { onChange, onSubmit, formData, errors } = useForm(login, validate);

  const { lastname, password } = formData;

  function login() {
    loginUser(lastname, password);
    history.push('/');
  }

  return (
    <div>
      <Form onSubmit={onSubmit}>
        <Form.Group>
          <Form.Label>Last Name</Form.Label>
          <Form.Control
            name='lastname'
            type='text'
            placeholder='Last Name'
            onChange={onChange}
            value={lastname || ''}
          />
        </Form.Group>
        <p>{errors.lastname}</p>
        <Form.Group>
          <Form.Label>Password</Form.Label>
          <Form.Control
            name='password'
            type='password'
            placeholder='Password'
            onChange={onChange}
            value={password || ''}
          />
        </Form.Group>
        <p>{errors.password}</p>
        <Button variant='primary' type='submit'>
          Submit
        </Button>
      </Form>
    </div>
  );
};

export default connect(null, { loginUser })(Login);

Это работает правильно, состояние установлено, а часть "isAuthenticated" моего состояния redux имеет значение true.

Итак, вот где вопрос в том. В моем index. js я установил useEffect, который загружает пользователя при каждой загрузке страницы. Это действие вызывает мою внутреннюю часть, чтобы проверить готовность ie, а затем обновить состояние redux с информацией о пользователе. Проблема, и это раздражает, заключается в том, что он выполняет это действие каждый раз при загрузке страницы и, конечно, если пользователь не вошел в систему, это дает мне ошибку.

Есть ли лучший способ сделать это, чтобы не требует, чтобы я запрашивал серверную часть при каждой загрузке страницы? Я попытался использовать состояние isAuthenticated, чтобы он запрашивал только тогда, когда это правда, однако тогда он не может проверить, что пользователь вошел в систему.

index. js

const Root = ({ history }) => {
  useEffect(() => {
    store.dispatch(loadUser());
    history.push('/');
  }, [history]);

  return (
    <Switch>
      <Route exact path='/' component={App} />
      <Route path='/login' component={Login} />
    </Switch>
  );
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
});

const RootWithRouter = withRouter(connect(mapStateToProps, { loadUser })(Root));

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <RootWithRouter />
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);