Mencipta laluan yang dilindungi: panduan cara menggunakan react-router-dom

Question

Cara menggunakan react-router-dom untuk mencipta laluan yang dilindungi dan menyimpan respons dalam localStorage supaya pengguna boleh melihat butiran mereka semula pada kali seterusnya mereka membukanya. Selepas log masuk, mereka harus diubah hala ke halaman papan pemuka.

Semua fungsi ditambah dalam ContextApi.Codesandbox链接：Kod

我尝试过，但无法实现

路由页面

import React, { useContext } daripada "react";
import { globalC } daripada "./context";
import { Route, Switch, BrowserRouter } daripada "react-router-dom";
import Perihal daripada "./Perihal";
import Papan Pemuka daripada "./Papan Pemuka";
import Log Masuk daripada "./Login";
import PageNotFound daripada "./PageNotFound";

fungsi Laluan() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  kembali (
    <Penghala Penyemak Imbas>
      <Tukar>
        {authLogin ? (
          <>
            <Route path="/dashboard" component={Dashboard} tepat />
            <Route exact path="/About" component={About} />
          </>
        ) : (
          <Route path="/" component={Login} tepat />
        )}

        <Komponen laluan={PageNotFound} />
      </Tukar>
    </BrowserRouter>
  );
}
eksport Laluan lalai;

上下文页面

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

eksport const globalC = createContext();

kelas eksport Gprov memanjangkan Komponen {
  negeri = {
    authLogin: null,
    authLoginerror: null
  };
  componentDidMount() {
    var localData = JSON.parse(localStorage.getItem("loginDetail"));
    if (localData) {
      this.setState({
        authLogin: localData
      });
    }
  }

  loginData = tak segerak () => {
    biarkan muatan = {
      token: "ctz43XoULrgv_0p1pvq7tA",
      data: {
        nama: "nama pertama",
        e-mel: "internetEmail",
        telefon: "phoneHome",
        _ulang: 300
      }
    };
    tunggu aksios
      .post(`https://app.fakejson.com/q`, muatan)
      .then((res) => {
        jika (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"));
    kembali (
      
        {this.props.children}
      
    );
  }
}

Answer 1

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

Pautan dokumen: https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f

Answer 2

Soalan

<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和RedirectTiada pemaparan lain akan diproses di luar komponen. Jika anda ingin "bersarang" seperti ini, maka anda perlu membungkus setiap komponen dalam laluan generik, tetapi ini sama sekali tidak perlu.

Komponen log masuk anda belum lagi mengendalikan ubah hala kembali ke "rumah" asal atau laluan peribadi yang dilawati.

Penyelesaian

react-router-dom v6

Dalam versi 6, komponen penghalaan tersuai tidak lagi popular, kaedah pilihan adalah menggunakan komponen reka letak 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>

atau

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

Buat komponen PrivateRoute yang menggunakan konteks pengesahan anda.

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

Kemas kini komponen Login anda untuk mengendalikan ubah hala hala kembali ke lawatan asal.

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

Menjadikan semua laluan sebagai "senarai rata"

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