React auth0 PrivateRouter 结合重定向

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 组件下，如果它已经登录，我将重定向到仪表板组件

在仪表板布局下，如果未登录，我将重定向到“/auth”

React auth0 PrivateRouter 结合重定向

React auth0 PrivateRouter combined with Redirect

reactjs

react-router

auth0