Bagaimana untuk Melaksanakan Laluan Dilindungi dalam React Router DOM v5 dan v6?

Bagaimana untuk Mencipta Laluan Terlindung dengan React Router DOM?

Masalah

Kod ini, yang menggunakan React Router DOM dan menyimpan respons dalam localStorage, harus mencipta laluan yang dilindungi yang membolehkan pengguna terus melihat butiran mereka apabila kembali ke halaman. Selepas log masuk, mereka harus diubah hala ke halaman papan pemuka, tetapi pelaksanaannya gagal mencapai ini.

Halaman Laluan

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;

Halaman Konteks

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

Penyelesaian

1. React Router DOM v6

Dalam versi 6, gunakan komponen reka letak pengesahan dan bukannya komponen laluan tersuai:

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

Kemas kini laluan anda:

<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

Dalam versi 5, buat komponen 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 }
      }}
    />
  );
};

Kemas kini komponen Log Masuk anda:

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

Kemas kini laluan anda:

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

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Laluan Dilindungi dalam React Router DOM v5 dan v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!