React-Router-Dom v6 保护路由

Question

我需要有关如何使用 react-router-dom v6 实现受保护路由的帮助。这个例子对我不起作用。我想在访问受保护的路由和未登录的用户时，重定向到登录页面。

AuthenticatedRoute

import React from "react";
import { Route, Navigate } from "react-router-dom";

const AuthenticatedRoute = ({ component: Component, ...rest }) => {
  //converts object to boolean ->false if null else true//
  const isAuthenticated = !!localStorage.getItem("token");
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Navigate to="/auth/login" />
        )
      }
    />
  );
};

export default React.memo(AuthenticatedRoute);

Routes.js

import React, { lazy } from "react";

import { Navigate, Route, Routes } from "react-router-dom";
import AuthenticatedRoute from "./Components/Routes/AuthenticatedRoute";


const AppRoutes = () => {
 
  return (
    <Routes>
      <AuthenticatedRoute
        path="/admin"
        component={<Navigate to="/admin/dashboard" />}
      />

      <AuthenticatedRoute exact path="/admin" component={<DashboardLayout />}>
        <AuthenticatedRoute exact path="/dashboard" component={<Dashboard />} />
        <AuthenticatedRoute
          exact
          path="/property-management"
          component={<AdminPropManagement />}
        />
        <AuthenticatedRoute
          exact
          path="/new-property"
          component={<NewProperty />}
        />
      </AuthenticatedRoute>
    </Routes>
  );
};

export default AppRoutes;

Answer 1

经过深入研究，这对我有用。

注意：

1. redirect 在 react-router-dom v6 中被 Navigate 取代
2. 在 react-router-dom v6 中，Switch 被替换为 Routes

Routes.js

import { Navigate, Route, Routes } from "react-router-dom";

const AppRoutes = () => {

  const isAuthenticated = !!localStorage.getItem("token");

  return (
    <Routes>
      <Route
        path="/admin"
        element={
          isAuthenticated ? (
            <Navigate to="/admin/dashboard" />
          ) : (
            <Navigate to="/auth/login" />
          )
        }
      />

      <Route
        exact
        path="/admin"
        element={
          isAuthenticated ? <DashboardLayout /> : <Navigate to="/auth/login" />
        }
      >
        <Route exact path="/dashboard" element={<Dashboard />} />
        <Route
          exact
          path="/property-management"
          element={<AdminPropManagement />}
        />
        <Route exact path="/new-property" element={<NewProperty />} />
      </Route>

    </Routes>
  );
};

export default AppRoutes;

Answer 2

我不知道<Navigate />，以前也没有使用过，但我正在使用并为我工作的是<Redirect to={path} /> 和useHistory 钩子。

1. 重定向

import React from "react";
import { Route, Redirect } from "react-router-dom";

const AuthenticatedRoute = ({ component: Component, ...rest }) => {
  //converts object to boolean ->false if null else true//
  const isAuthenticated = !!localStorage.getItem("token");
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/auth/login" />
        )
      }
    />
  );
};

export default React.memo(AuthenticatedRoute);

1. 使用历史

import React from "react";
import { Route, Redirect, useHistory } from "react-router-dom";

const AuthenticatedRoute = ({ component: Component, ...rest }) => {
  //converts object to boolean ->false if null else true//
  const isAuthenticated = !!localStorage.getItem("token");
  const history = useHistory();
  
  if(!isAuthenticated) {
    history.push("/auth/login");
  }
  
  return (
    <Route
      {...rest}
      render={(props) => <Component {...props} />}
    />
  );
};

export default React.memo(AuthenticatedRoute);

Answer 3

试试这个 -

import { Redirect } from "react-router-dom";

     render() {
        return this.state.isAuthenticated ? (
                <Component/>
            ):(
          <Redirect to={{ pathname: "/web/login" }} />
        );
      }
    }