建立受保護路由的指南：使用react-router-dom實現保護性路由

Question

<p>如何使用<code>react-router-dom</code>建立受保護的路由，並將回應儲存在localStorage中，以便使用者下次開啟時可以再次查看他們的詳細資料。登入後，他們應該重定向到儀表板頁面。 </p> <p>所有功能都在ContextApi中加入。 </p> <p>Codesandbox連結：Code</p> <p>我嘗試過，但未能實現。</p>

路由頁面

<pre class="brush:php;toolbar:false;">從「react」匯入 React, { useContext }; 從“./context”導入{globalC}； 從「react-router-dom」匯入{路由、交換器、BrowserRouter}； 從“./About”導入關於； 從“./Dashboard”導入儀表板； 從“./Login”匯入登入名； 從“./PageNotFound”導入PageNotFound； 函數路線（）{ const { authLogin } = useContext(globalC); console.log("authLogin", authLogin); 返回 （ <瀏覽器路由器> <開關> {驗證登入？ （ <> <路線路徑=“/儀表板”組件= {儀表板}精確/> /> <路線確切路徑=“/關於”元件= {關於} /> </> ) : ( <路由路徑=“/”元件={登入}精確/>> )} <路由元件={PageNotFound} /> </切換> </瀏覽器路由器> ）； } 導出預設路由；</pre>

上下文頁面

從「react」匯入 React, { Component, createContext };
從“axios”導入 axios；

匯出 const globalC = createContext();

導出類別 Gprov 擴充組件 {
  狀態={
    授權登入：空，
    authLogin錯誤：空
  };
  組件DidMount() {
    var localData = JSON.parse(localStorage.getItem("loginDetail"));
    如果（本地資料）{
      this.setState({
        authLogin：本地數據
      });
    }
  }

  登入資料 = async() => {
    讓有效負載= {
      令牌：“ctz43XoULrgv_0p1pvq7tA”，
      數據： {
        名稱：“名字第一”，
        電子郵件：“互聯網電子郵件”，
        電話：“電話主頁”，
        _重複：300
      }
    };
    等待 axios
      .post(`https://app.fakejson.com/q`，有效負載)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            authLogin：res.data
          });
          localStorage.setItem("loginDetail", JSON.stringify(res.data));
        }
      })
      .catch((錯誤) =>
        this.setState({
          授權登入錯誤：錯誤
        })
      ）；
  };
  使成為（） {
    // console.log(localStorage.getItem("loginDetail"));
    返回 （
      
        {this.props.children}
      
    ）；
  }
}</pre>
<p><br />></p>

Answer 1

對於v6：

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

function App() {
  return (
    <Routes>
      <Route path="/public" element={<PublicPage />} />
      <Route
        path="/protected"
        element={
          <RequireAuth redirectTo="/login">
            <ProtectedPage />
          </RequireAuth>
        }
      />
    </Routes>
  );
}

function RequireAuth({ children, redirectTo }) {
  let isAuthenticated = getAuth();
  return isAuthenticated ? children : <Navigate to={redirectTo} />;
}

連結到文件： https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f

Answer 2

問題

<BrowserRouter>
  <Switch>
    {authLogin ? (
      <>
        <Route path="/dashboard" component={Dashboard} exact />
        <Route exact path="/About" component={About} />
      </>
    ) : (
      <Route path="/" component={Login} exact />
    )}

    <Route component={PageNotFound} />
  </Switch>
</BrowserRouter>

Switch除了Route和Redirect元件之外，不處理任何其他渲染。如果您想要像這樣“嵌套”，那麼您需要將每個元件包裝在通用路由中，但這是完全不必要的。

您的登入元件也沒有處理重定向回原始存取的「首頁」或私有路由。

解決方案

react-router-dom v6

在版本6中，自訂路由元件已經不再受歡迎，首選方法是使用auth佈局元件。

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = () => {
  const location = useLocation();
  const { authLogin } = useContext(globalC);

  if (authLogin === undefined) {
    return null; // 或者加载指示器/旋转器等
  }

  return authLogin 
    ? <Outlet />
    : <Navigate to="/login" replace state={{ from: location }} />;
}

...

<BrowserRouter>
  <Routes>
    <Route path="/" element={<PrivateRoutes />} >
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="about" element={<About />} />
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</BrowserRouter>

或

const routes = [
  {
    path: "/",
    element: <PrivateRoutes />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      },
      {
        path: "about",
        element: <About />
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "*",
    element: <PageNotFound />
  },
];

...

export default function Login() {
  const location = useLocation();
  const navigate = useNavigate();
  const { authLogin, loginData } = useContext(globalC);

  useEffect(() => {
    if (authLogin) {
      const { from } = location.state || { from: { pathname: "/" } };
      navigate(from, { replace: true });
    }
  }, [authLogin, location, navigate]);

  return (
    <div
      style={{ height: "100vh" }}
      className="d-flex justify-content-center align-items-center"
    >
      <button type="button" onClick={loginData} className="btn btn-primary">
        登录
      </button>
    </div>
  );
}

react-router-dom v5

建立一個消費您的auth上下文的PrivateRoute元件。

const PrivateRoute = (props) => {
  const location = useLocation();
  const { authLogin } = useContext(globalC);

  if (authLogin === undefined) {
    return null; // 或者加载指示器/旋转器等
  }

  return authLogin ? (
    <Route {...props} />
  ) : (
    <Redirect
      to={{
        pathname: "/login",
        state: { from: location }
      }}
    />
  );
};

更新您的Login元件以處理重定向回原始存取的路由。

export default function Login() {
  const location = useLocation();
  const history = useHistory();
  const { authLogin, loginData } = useContext(globalC);

  useEffect(() => {
    if (authLogin) {
      const { from } = location.state || { from: { pathname: "/" } };
      history.replace(from);
    }
  }, [authLogin, history, location]);

  return (
    <div
      style={{ height: "100vh" }}
      className="d-flex justify-content-center align-items-center"
    >
      <button type="button" onClick={loginData} className="btn btn-primary">
        登录
      </button>
    </div>
  );
}

將所有路由呈現為「平面清單」

function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <PrivateRoute path="/About" component={About} />
        <Route path="/login" component={Login} />
        <Route component={PageNotFound} />
      </Switch>
    </BrowserRouter>
  );
}