使用离子+反应时的路线守卫

Question

我想将未经身份验证的用户重定向到/login。我的上下文中有一个名为loggedIn 的属性，当它为假时，我想重定向到HomePage，即"/"。

我只是因为路线结构而感到困惑。我到处都看到类似受保护路线的东西。

import React, { useContext, useEffect } from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet, IonSplitPane } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { setupConfig } from "@ionic/react";
import { Plugins, Capacitor } from "@capacitor/core";
import { useHistory } from "react-router-dom";
import Home from "./pages/Home/Home";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
import "../src/utils/spacing.css";

/* Theme variables */
import "./theme/variables.css";

/* Components */
import Dashboard from "./pages/Dashboard/Dashboard";
import SideMenu from "./components/SideMenu/SideMenu";
import LoginPage from "./pages/Login/Login";
import SignupPage from "./pages/Signup/Signup";
import Create from "./pages/Create/Create";
import Edit from "./pages/Edit/Edit";
import { AuthContext, AuthProvider } from "./providers/context/AuthContext";


const App: React.FC = () => {
  const history = useHistory();

  return (
    <IonApp>
      <AuthProvider>
        <IonReactRouter>
          <IonSplitPane contentId="main">
            <SideMenu />
            <IonRouterOutlet id="main">
              <Route path="/dashboard/:name" component={Dashboard} exact />
              <Route path="/dashboard/Edit/:id" component={Edit} exact />
              // if !user navigate to login component
              <Route path="/create" component={Create} exact />
              <Route path="/signup" component={SignupPage} exact />
              <Route path="/" component={Home} exact />
              <Redirect from="/dashboard" to="/dashboard/Home" exact />
            </IonRouterOutlet>
          </IonSplitPane>
        </IonReactRouter>
      </AuthProvider>
    </IonApp>
  );
};

export default App;

Answer 1

可能对任何人都有用：通过使用私有路由和公共路由技巧来解决它

我创建了一个名为 PrivateRoute.tsx 的组件并添加了以下内容：

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { EnrolleeContext } from "../providers/context/EnrolleeContext";

const PrivateRoute = ({ component: Component, ...rest }: any) => {
  const { loggedIn } = useContext(EnrolleeContext);

  return (
    // Show the component only when the user is logged in
    // Otherwise, redirect the user to /signin page
    <Route
      {...rest}
      render={(props) =>
        loggedIn ? <Component {...props} /> : <Redirect to="/" />
      }
    />
  );
};

export default PrivateRoute;

还创建了一个 Public Route，添加了限制到 restrict Components if restricted == true，这意味着 Route 是 Private，如果为 false，否则。

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { EnrolleeContext } from "../providers/context/EnrolleeContext";

const PublicRoute = ({ component: Component, restricted, ...rest }: any) => {
  const { loggedIn } = useContext(EnrolleeContext);

  return (
    // restricted = false meaning public route
    // restricted = true meaning restricted route
    <Route
      {...rest}
      render={(props) =>
        loggedIn && restricted ? (
          <Redirect to="/dashboard/Home" />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

export default PublicRoute;

更新App.tsx

<PublicRoute restricted={false} component={Home} path="/" exact />
          <PublicRoute
            restricted={true}
            component={LoginPage}
            path="/login"
            exact
          />
          <PrivateRoute
            component={Dashboard}
            path="/dashboard/:name"
            exact
          />
          <PrivateRoute component={Create} path="/create" exact />
          <PublicRoute
            restricted={false}
            component={ForgotPassword}
            path="/forgot-password"
            exact
          />

其他路由，例如forgot password is open to the public`，而 Create 是 Private，因此由您自行决定。