Cara Membuat Laluan Dilindungi dengan Penghala React dan React DOM

Apabila membina aplikasi web menggunakan React, kami selalunya perlu mengehadkan akses kepada laluan tertentu dan hanya membenarkan akses kepada pengguna yang disahkan. Artikel ini akan menerangkan cara membuat laluan yang dilindungi menggunakan React, react-router-dom dan komponen Outlet serta menunjukkan cara untuk mengesahkan sama ada pengguna ialah pentadbir berdasarkan nilai yang disimpan dalam localStorage.

Apakah penghalaan yang dilindungi?

Laluan yang dilindungi merujuk kepada halaman yang hanya boleh diakses oleh pengguna yang memenuhi syarat tertentu (seperti disahkan atau mempunyai kebenaran khusus, seperti kebenaran pentadbir). Jika syarat ini tidak dipenuhi, pengguna akan dialihkan ke halaman lain, seperti halaman log masuk.

Prasyarat

Sebelum anda bermula, sila pastikan:

• React telah dikonfigurasikan dalam projek.
• React-router-dom dipasang:

<code class="language-bash">npm install react-router-dom</code>

Contoh: Penghalaan dilindungi dengan pengesahan pentadbir

Contoh ini akan mengesahkan bahawa pengguna disahkan sebagai pentadbir dengan menyemak nilai dalam localStorage. Jika bukan pentadbir, ubah hala mereka ke halaman log masuk.

• Konfigurasi penghalaan

Pertama, konfigurasikan laluan utama aplikasi.

<code class="language-javascript">import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import ProtectedRoute from "./ProtectedRoute";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route element={<ProtectedRoute />} path="/dashboard/*">
          <Route index element={<Dashboard />} /> {/*  添加index路由处理/dashboard */}
        </Route>
      </Routes>
    </Router>
  );
}

export default App;</code>

• Buat komponen ProtectedRoute

Komponen ini mengesahkan bahawa pengguna disahkan sebagai pentadbir sebelum memberikan laluan yang dilindungi. Jika tidak, halakan ia ke halaman log masuk.

<code class="language-javascript">import React from "react";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  // 从localStorage中检查用户是否为管理员
  const isAdmin = localStorage.getItem("role") === "admin";

  return isAdmin ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoute;</code>

Penjelasan kod:

localStorage.getItem("role"): Simpan peranan pengguna dalam localStorage. Jika peranannya ialah "pentadbir", komponen Outlet dipaparkan, yang mewakili kandungan laluan yang dilindungi. Jika tidak, gunakan komponen Navigate untuk mengubah hala pengguna ke laluan akar (/).

• Buat halaman log masuk (Log Masuk) Halaman ini mensimulasikan proses log masuk asas dan menyimpan peranan pengguna dalam localStorage.

<code class="language-javascript">import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 模拟登录并保存用户角色
    localStorage.setItem("role", "admin");
    navigate("/dashboard");
  };

  return (
    <div>
      {/* 登录表单 */}
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}

export default Login;</code>

• Buat halaman Papan Pemuka

Halaman papan pemuka ialah laluan yang dilindungi dan hanya boleh diakses oleh pengguna yang mempunyai peranan pentadbir.

<code class="language-javascript">import React from "react";

function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <p>这是受保护的页面内容。</p>
    </div>
  );
}

export default Dashboard;</code>

Contoh proses

Aplikasi akses pengguna:

Jika anda tidak log masuk, anda akan melihat halaman log masuk (/). Selepas log masuk sebagai pentadbir, peranan akan disimpan dalam localStorage dan dialihkan ke Papan Pemuka (/dashboard). Dalam Papan Pemuka, kandungan yang dilindungi (statistik dan konfigurasi) dipaparkan.

Jika pengguna cuba mengakses Papan Pemuka secara terus tanpa hak pentadbir, mereka akan diubah hala secara automatik ke halaman log masuk.

Ringkasan

Penghalaan yang dilindungi adalah penting untuk aplikasi yang mengendalikan pengguna dan kebenaran. Menggunakan React Router DOM, komponen Outlet dan storan penyemak imbas (seperti localStorage), kami boleh melaksanakan sistem sekatan akses asas. Pendekatan ini bagus untuk aplikasi kecil atau projek pembelajaran, tetapi dalam projek yang lebih besar, penyelesaian pengesahan yang lebih kukuh disyorkan.

Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej di ruangan komen?

Atas ialah kandungan terperinci Cara Membuat Laluan Dilindungi dengan Penghala React dan React DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!