Question

我是React的新手，我试图创建一个带有日志记录部分的简单页面，以实现集成了Auth0这样的https://github.com/auth0-samples/auth0-react-samples/blob/master/01-Login的页面。

当我尝试使用PrivateRoute时，我的问题来了，目前我的路线是按这样的方式完成的

app.js执行renderRoutes并接收路由数组。我的疑问是：如何将PrivateRoutes应用于所有仪表板组件？

const routes = [
  {
    path: '/',
    exact: true,
    component: () => <Redirect to="/app" />,
  },
  {
    path: '/auth',
    component: AuthLayout,
    routes: [
      {
        path: '/auth/login',
        exact: true,
        component: lazy(() => import('views/Login')),
      },
      {
        component: () => <Redirect to="/errors/error-404" />,
      },
    ],
  },
  {
    route: '/app',
    component: DashboardLayout,
    routes: [
      {
        path: '/calendar',
        exact: true,
        component: lazy(() => import('views/Calendar'))
      },
      {
        component: () => <Redirect to="/errors/error-404" />,
      },
    ],
  },
  {
    path: '/errors',
    component: ErrorLayout,
    routes: [
      {
        path: '/errors/error-401',
        exact: true,
        component: lazy(() => import('views/Error401')),
      },
      {
        path: '/errors/error-404',
        exact: true,
        component: lazy(() => import('views/Error404')),
      },
      {
        path: '/errors/error-500',
        exact: true,
        component: lazy(() => import('views/Error500')),
      },
      {
        component: () => <Redirect to="/errors/error-404" />,
      },
    ],
  },
];

const Dashboard = props => {

  const { route } = props;

  const classes = useStyles();
  const [openNavBarMobile, setOpenNavBarMobile] = useState(false);

  const handleNavBarMobileOpen = () => {
    setOpenNavBarMobile(true);
  };

  const handleNavBarMobileClose = () => {
    setOpenNavBarMobile(false);
  };

  return (
        <div className={classes.root}>
          <TopBar
            className={classes.topBar}
            onOpenNavBarMobile={handleNavBarMobileOpen}
          />
          <div className={classes.container}>
            <NavBar
              className={classes.navBar}
              onMobileClose={handleNavBarMobileClose}
              openMobile={openNavBarMobile}
            />
            <main className={classes.content}>
              <Suspense fallback={<LinearProgress />}>
                {renderRoutes(route.routes)}
              </Suspense>
            </main>
          </div>
          <ChatBar />
          </div>
  );
};


  const { loading } = useAuth0();

   if (loading) {
    return <h1>loading</h1>
   }

  return (
        <StoreProvider store={store}>
          <ThemeProvider theme={theme}>
            <MuiPickersUtilsProvider utils={MomentUtils}>
              <Router history={history}>
                <ScrollReset />
                <GoogleAnalytics />
                <CookiesNotification />
                {renderRoutes(routes)}
              </Router>
            </MuiPickersUtilsProvider>
            </ThemeProvider>
          </StoreProvider>
  );
};```

Answer 1

我使用了以前使用的模板。

我实现了这样的私有路由。

在AuthLayout组件下，如果已经登录，我将重定向到仪表板组件

在DashboardLayout下，如果未登录，我将重定向到“ / auth”

将auth0 PrivateRouter与重定向结合起来

1 个答案: