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

Question

[eswifft]

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

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

Как пофиксить это дело?

Comments

[golentor]

Во Vue есть middleware а как с этим дела в Реакте? и неужели нет пакета react-auth неповерю

[golentor]

golentor, оказывается есть npm install react-token-auth
Тогда делаем проще

export const createAuthProvider = () => {

    /* Implementation */

    return {
        useAuth,
        authFetch,
        login,
        logout
    }
};

и вот Ваш Роутер
export const Router = () => {
    const [logged] = useAuth();

    return <BrowserRouter>
        <Switch>
            {!logged && <>
                <Route path="/register" component={Register}/>
                <Route path="/login" component={Login}/>
                <Redirect to="/login"/>
            </>}
            {logged && <>
                <Route path="/dashboard" component={Dashboard} exact/>
                <Redirect to="/dashboard"/>
            </>}
        </Switch>
    </BrowserRouter>;
};

Не правда-ли, так короче?)

Answer 1

[Александр Черемхин]

У вас код работает правильно. Переменная isAuthenticated инициализируются после асинхронного вызова loadUser. Поэтому при старте приложения пользователь ещё не авторизован и isAuthenticated в store равно false.
Исправьте логику. Варианты
1) вызов loadUser может быть синхронным
2) показывайте первую страницу одинаковую для всех пользователей.
3) запускайте роутер после получения ответа на loadUser