如何在 React Router DOM v5 和 v6 中實現受保護的路由？

如何使用 React Router DOM 建立受保護的路由？

問題

此程式碼利用 React Router DOM 並將回應儲存在 localStorage 中，應建立一個受保護的路由，讓使用者在返回頁面後繼續查看其詳細資料。登入後，他們應該被重定向到儀表板頁面，但實現未能實現此目的。

路線頁面

import React, { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch,BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <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>
  );
}

export default Routes;

上下文頁

import React, { Component, createContext } from "react";
import axios from "axios";

export const globalC = createContext();

export class Gprov extends Component {
  state = {
    authLogin: null,
    authLoginerror: null,
  };

  componentDidMount() {
    var localData = JSON.parse(localStorage.getItem("loginDetail"));
    if (localData) {
      this.setState({
        authLogin: localData,
      });
    }
  }

  loginData = async () => {
    let payload = {
      token: "ctz43XoULrgv_0p1pvq7tA",
      data: {
        name: "nameFirst",
        email: "internetEmail",
        phone: "phoneHome",
        _repeat: 300,
      },
    };
    await axios
      .post(`https://app.fakejson.com/q`, payload)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            authLogin: res.data,
          });
          localStorage.setItem("loginDetail", JSON.stringify(res.data));
        }
      })
      .catch((err) =>
        this.setState({
          authLoginerror: err,
        })
      );
  };

  render() {
    // console.log(localStorage.getItem("loginDetail"));
  }
}

解決方案

1. React Router DOM v6

在版本6 中，使用auth 版面配置元件而不是自訂路由元件：

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

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

  if (authLogin === undefined) {
    return null; // or loading indicator/spinner/etc
  }

  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>

2. React Router DOM v5

在版本5 中，建立一個 PrivateRoute 元件：

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

  if (authLogin === undefined) {
    return null; // or loading indicator/spinner/etc
  }

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

更新您的登入元件：

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

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

  return (
    ...
  );
}

更新您的路由：

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

以上是如何在 React Router DOM v5 和 v6 中實現受保護的路由？的詳細內容。更多資訊請關注PHP中文網其他相關文章！