如何在Coreui React仪表板中将路线设置为私有

Question

我正在使用CoreUI React Admin仪表板并实现Auth System。.我很困惑将所有仪表板路由设为私有（首先用户登录正常，然后...将允许访问完整的仪表板功能）

我找到了有关使用CoreUI进行路由保护的解决方案，但不适用于我

在这里

我更改了代码

{/ *

    {routes.map((route, idx) => {
                    return route.component ? (
                      <Route
                        key={idx}
                        path={route.path}
                        exact={route.exact}
                        name={route.name}
                        render={props => <route.component {...props} />}
                      />
                    ) : null;
                  })}
                  <Redirect from="/" to="/dashboard" /> */}

with this one

                  {routes.map((route, idx) => {
                    return route.component ? (
                      <Route
                        key={idx}
                        path={route.path}
                        exact={route.exact}
                        name={route.name}
                        render={props =>
                          localStorage.getItem("jwtToken") !== null ? (
                            <route.component {...props} />
                          ) : (
                            <Redirect to={{ pathname: "/login" }} />
                          )
                        }
                      />
                    ) : null;
                  })}
                  <Redirect from="/" to="/dashboard" />

```This is my App.js File

    import React, { Component } from "react";
    import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
    import jwt_decode from "jwt-decode";
    import setAuthToken from "./utils/setAuthToken";
    import { setCurrentUser, logoutUser } from "./actions/authActions";
    import { Provider } from "react-redux";

    import store from "./store";
    // import { renderRoutes } from 'react-router-config';

    import PrivateRoute from "./views/common/PrivateRoute";
    import "./App.scss";

    const loading = () => (
      <div className="animated fadeIn pt-3 text-center">Loading...</div>
    );

    // Containers
    const DefaultLayout = React.lazy(() => import("./containers/DefaultLayout"));

    // Pages
    const Login = React.lazy(() => import("./views/Pages/Login"));
    const Register = React.lazy(() => import("./views/Pages/Register"));
    const Page404 = React.lazy(() => import("./views/Pages/Page404"));
    const Page500 = React.lazy(() => import("./views/Pages/Page500"));

    // Check for token
    if (localStorage.jwtToken) {
      // Set auth token header auth
      setAuthToken(localStorage.jwtToken);
      // Decode token and get user info and exp
      const decoded = jwt_decode(localStorage.jwtToken);
      // Set user and isAuthenticated
      store.dispatch(setCurrentUser(decoded));

      // Check for expired token
      const currentTime = Date.now() / 1000;
      if (decoded.exp < currentTime) {
        // Logout user
        store.dispatch(logoutUser());
        // TODO: Clear current Profile

        // Redirect to login
        window.location.href = "/login";
      }
    }
    class App extends Component {
      render() {
        return (
          <Provider store={store}>
            <Router>
              <React.Suspense fallback={loading()}>
                <Switch>
                  <Route
                    exact
                    path="/login"
                    name="Login Page"
                    render={props => <Login {...props} />}
                  />
                  <Route
                    exact
                    path="/register"
                    name="Register Page"
                    render={props => <Register {...props} />}
                  />
                  <Route
                    exact
                    path="/404"
                    name="Page 404"
                    render={props => <Page404 {...props} />}
                  />
                  <Route
                    exact
                    path="/500"
                    name="Page 500"
                    render={props => <Page500 {...props} />}
                  />

                  <PrivateRoute
                    path="/dashboard"
                    name="Home"
                    component={props => <DefaultLayout {...props} />}
                  />
                </Switch>
              </React.Suspense>
            </Router>
          </Provider>
        );
      }
    }

    export default App;

```this is my DefaultLayout.js File

    import React, { Component, Suspense } from "react";
    import { Redirect, Route, Switch } from "react-router-dom";
    import * as router from "react-router-dom";
    import { Container } from "reactstrap";
    import { PropTypes } from "prop-types";
    import { connect } from "react-redux";

    import {
      AppFooter,
      AppHeader,
      AppSidebar,
      AppSidebarFooter,
      AppSidebarHeader,
      AppSidebarMinimizer,
      AppBreadcrumb2 as AppBreadcrumb,
      AppSidebarNav2 as AppSidebarNav
    } from "@coreui/react";
    // sidebar nav config
    import navigation from "../../_nav";
    // routes config
    import routes from "../../routes";

    const DefaultFooter = React.lazy(() => import("./DefaultFooter"));
    const DefaultHeader = React.lazy(() => import("./DefaultHeader"));

    class DefaultLayout extends Component {
      loading = () => (
        <div className="animated fadeIn pt-1 text-center">Loading...</div>
      );

      render() {
        console.log(this.props);
        return (
          <div className="app">
            <AppHeader fixed>
              <Suspense fallback={this.loading()}>
                <DefaultHeader onLogout={e => this.signOut(e)} />
              </Suspense>
            </AppHeader>
            <div className="app-body">
              <AppSidebar fixed display="lg">
                <AppSidebarHeader />
                <Suspense>
                  <AppSidebarNav
                    navConfig={navigation}
                    {...this.props}
                    router={router}
                  />
                </Suspense>
                <AppSidebarFooter />
                <AppSidebarMinimizer />
              </AppSidebar>
              <main className="main">
                <AppBreadcrumb appRoutes={routes} router={router} />
                <Container fluid>
                  <Suspense fallback={this.loading()}>
                    <Switch>

                      {routes.map((route, idx) => {
                        return route.component ? (
                          <Route
                            key={idx}
                            path={route.path}
                            exact={route.exact}
                            name={route.name}
                            render={props =>
                              localStorage.getItem("jwtToken") !== null ? (
                                <route.component {...props} />
                              ) : (
                                <Redirect to={{ pathname: "/login" }} />
                              )
                            }
                          />
                        ) : null;
                      })}
                      <Redirect from="/" to="/dashboard" />
                    </Switch>
                  </Suspense>
                </Container>
              </main>
            </div>
            <AppFooter>
              <Suspense fallback={this.loading()}>
                <DefaultFooter />
              </Suspense>
            </AppFooter>
          </div>
        );
      }
    }

    DefaultLayout.propTypes = {
      auth: PropTypes.object.isRequired
    };

    const mapStateToProps = state => ({
      auth: state.auth
    });

    export default connect(mapStateToProps)(DefaultLayout);

当我单击注销时，我的会话将销毁，但它们仅将我从仪表板重定向到登录。...此代码正对此起作用

<PrivateRoute
                path="/dashboard"
                name="Home"
                component={props => <DefaultLayout {...props} />}
              />