Wie implementiert man geschützte Routen in React Router DOM v5 und v6?

Wie erstelle ich eine geschützte Route mit React Router DOM?

Problem

Dieser Code, der React Router DOM nutzt und Antworten in localStorage speichert, sollte eine geschützte Route erstellen, die es Benutzern ermöglicht, ihre Details weiterhin anzuzeigen, wenn sie zur Seite zurückkehren. Nach der Anmeldung sollten sie auf die Dashboard-Seite umgeleitet werden, aber die Implementierung schafft dies nicht.

Routenseite

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;

Kontextseite

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

Lösung

1. React Router DOM v6

Verwenden Sie in Version 6 eine Authentifizierungslayoutkomponente anstelle von benutzerdefinierten Routenkomponenten:

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

Aktualisieren Sie Ihre Routen:

<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

Erstellen Sie in Version 5 eine PrivateRoute-Komponente:

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

Aktualisieren Sie Ihre Login-Komponente:

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

Aktualisieren Sie Ihre Routen:

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

Das obige ist der detaillierte Inhalt vonWie implementiert man geschützte Routen in React Router DOM v5 und v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!