Лучший способ реализовать логин с помощью этого примера React

Question

Я унаследовал приложение React со следующей структурой, но у него нет App.js, поэтому я не понимаю, как реализовать страницу входа в систему, чтобы заставить пользователя войти в систему, прежде чем он сможет перейти на другие страницы или Приборная панель.

Я предполагаю, что при входе в систему будет установлен state.user = {некоторый пользовательский объект}, и где-нибудь он проверит, является ли пользователь состояния нулевым, затем перейдет на страницу входа.

Дайте мне знать, если вам нужно увидеть другие фрагменты кода

react-app
  public
     index.html
  src 
     layouts
        Dashboard
           Dashboard.jsx
        Pages
           Pages.jsx
     routes
        dashboard.jsx
        index.jsx
        pages.jsx 
     views 
        Pages
           LoginPage.jsx 
     index.js

index.js

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router-dom";
import indexRoutes from "routes/index.jsx";

const hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route path={prop.path} key={key} component={prop.component} />;
      })}
    </Switch>
  </Router>,
  document.getElementById("root")
);

маршруты / index.jsx

import Pages from "layouts/Pages/Pages.jsx";
import Dashboard from "layouts/Dashboard/Dashboard.jsx";

var indexRoutes = [
  { path: "/pages", name: "Pages", component: Pages },
  { path: "/", name: "Home", component: Dashboard }
];

export default indexRoutes;

Answer 1

Добавил это в строку 9 в index.js

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router-dom";
import indexRoutes from "routes/index.jsx";

const hist = createBrowserHistory();

// TODO: store the bearer token and actually call a validateToken
//       function instead of checking if user is null but this is 
//       just for POC
if (localStorage.getItem("user") == null) { 
  hist.push("/pages/login-page"); 
}

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route path={prop.path} key={key} component={prop.component} />;
      })}
    </Switch>
  </Router>,
  document.getElementById("root")
);

Answer 2

Прежде всего вы должны иметь в виду, что React state сбрасывается при обновлении страницы, то есть вы будете «выходить из системы» каждый раз, когда это происходит. Поэтому я бы рекомендовал вместо этого хранить user учетные данные в localStorage.

React Router очень динамичен, и вы можете иметь несколько Switch блоков. Это похоже на то, как я обычно это решаю:

class Routes extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" component={Login} />
                    <Route path="/"
                           render={props => {
                               if (this.isLoggedIn()) {
                                   return <LoggedInRoutes {...props} />;
                               } else {
                                   return <Redirect to="/login" />;
                               }
                           }} />
                </Switch>
            </Router>
        )
    }

    isLoggedIn() {
        return localStorage.getItem("user") != null;
    }
}

class LoggedInRoutes extends React.Component {
    render() {
        return (
            <Switch>
                <Route path="/pages" component={Pages} />
                <Route path="/" component={Dashboard} />
            </Switch>
        )
    }
}

Затем вы можете поместить все свои маршруты, не требующие аутентификации, в компонент Routes, а все остальные в компоненте LoggedInRoutes.