@eswifft

Как правильно вывести роуты в зависимости от условия в React?

Столкнулся с такой проблемой в написании аутентификации.

В зависимости от переменной, отвечающей за аутентификацию пользователь получает определенный набор роутов. Но в момент первоначальной загрузки, когда переменная еще не получила значение из redux стора, выводятся роуты для не залогининого пользователя, т.е. страница регистрации, а уже только потом нужные страницы.

Получается, что каждый раз при обновлении мелькает страница регистрации.

Код для routes.js:
export const RotesPage = ({ isAuthenticated }) => {
  if (isAuthenticated) {
    return (
      <div>
        <Switch>
          <Route path="/" exact>
            <MainPage />
          </Route>
          <Route path="/schedule" exact>
            <SchedulePage />
          </Route>
          <Route path="/tasks" exact>
            <TasksPage />
          </Route>
          <Route path="/money" exact>
            <MoneyPage />
          </Route>
          <Redirect to="/" />
        </Switch>
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <Switch>
        <Route path="/login" exact>
          <LoginPage />
        </Route>
        <Route path="/register" exact>
          <RegisterPage />
        </Route>
        <Redirect to="/login" />
      </Switch>
    );
  }
};


Сам App.js:
import React, { useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { loadUser } from "./actions/authAction"; 
import { AppNavbar } from "./layouts/components/AppNavbar";
import { RotesPage } from "./routes";

const App = () => {
  const dispatch = useDispatch(); 
  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;

  useEffect(() => {
    dispatch(loadUser());
  }, [dispatch]);

  return (
    <Router>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </Router>
  );
};

export default App;


Как пофиксить это дело?
  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Che603000
c 2011 javascript
У вас код работает правильно. Переменная isAuthenticated инициализируются после асинхронного вызова loadUser. Поэтому при старте приложения пользователь ещё не авторизован и isAuthenticated в store равно false.
Исправьте логику. Варианты
1) вызов loadUser может быть синхронным
2) показывайте первую страницу одинаковую для всех пользователей.
3) запускайте роутер после получения ответа на loadUser
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
Market-place Ростов-на-Дону
от 100 000 до 200 000 ₽
23 июн. 2024, в 23:51
10000 руб./за проект
23 июн. 2024, в 23:27
5000 руб./за проект
23 июн. 2024, в 22:40
1000 руб./за проект