Question

我已经继承了具有以下结构的React App，但是它没有App.js，因此我对如何实现登录页面以强制用户登录之前无法进入其他页面感到困惑。仪表板。

我想登录将设置一个状态。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")
);

routes / 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

首先，您需要记住，React state在页面刷新时被重置，这意味着您每次发生时都将被“注销”。因此，我建议将user凭据保留在localStorage中。

反应路由器非常动态，您可以有多个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组件中。

Answer 2

将其添加到index.js的第9行

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")
);

通过此React示例实现登录的最佳方法

2 个答案: