React-Router-Dom v6 保护路由

Posted 2023-02-19

【中文标题】React-Router-Dom v6 保护路由

【英文标题】：React-Router-Dom v6 protected routes

【发布时间】：2021-11-03 21:24:32

【问题描述】：

我需要有关如何使用 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;

【参考方案1】：

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

注意：

redirect 在 react-router-dom v6 中被 Navigate 取代 在 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;

【参考方案2】：

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

重定向

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);

使用历史

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);

【讨论】：

谢谢。这很有帮助，但 Redirect 在 react-router-dom v6 中被 Navigate 取代

【参考方案3】：

试试这个 -

import  Redirect  from "react-router-dom";

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

【讨论】：

谢谢。这很有帮助，但 Redirect 在 react-router-dom v6 中被 Navigate 取代