React、Redux 和路由器身份验证

Question

不知道这是不是一个好问题。但是，我一直在寻找几个小时，我找不到我的问题令人满意的答案。为了简短起见，在我的路由器中，当我路由到 /dashboard 时；我想检查用户是否登录。如果用户没有登录，我想将他重定向到我的登录页面。唯一的问题，我从 redux 接收我的 isAuthenticated(is logged in) 变量，加载需要一秒钟。因此，每当我检查时，我的变量结果都是空的。

这是代码，

import React, { Component } from "react";
import Home from "./pages/Home";
import Testimonials from "./pages/Testimonials";
import Pricing from "./pages/Pricing";
import Login from "./pages/Login";
import Register from "./pages/Register";
import DashboardHome from "./pages/Dashboard/DashboardHome";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
class AppRouter extends Component {
  static propTypes = {
    isAuthenticated: PropTypes.bool
  };

  render() {
    return (
      <Router>
        <Switch>
          <Route path="/register">
            <Register />
          </Route>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/pricing">
            <Pricing />
          </Route>
          <Route path="/testimonials">
            <Testimonials />
          </Route>
          <Route path="/dashboard">
            this.props.isAuthenticated ?<DashboardHome /> :
            <Redirect to="/login" />
          </Route>

          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </Router>
    );
  }
}

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, {})(AppRouter);

非常感谢任何提供帮助的人。 react 和 redux 仍然是新手。

Answer 1

您可以设置您的组件defaultProps。更多信息在这里：https://reactjs.org/docs/react-component.html#defaultprops

AppRouter.defaultProps = {
  isAuthenticated: false
};

注意：React 的实验性 Suspense 组件可能对您有用，如果您希望在用户被验证时呈现加载组件。更多信息在这里：https://reactjs.org/docs/concurrent-mode-suspense.html