Melaksanakan Pengawal Laluan dalam Reaksi: Melindungi Laluan Anda dengan Pengesahan dan Peranan

Pengawal Laluan dalam React

Pengawal Laluan dalam React merujuk kepada mekanisme yang menyekat atau membenarkan akses kepada laluan tertentu berdasarkan syarat atau kriteria tertentu, seperti pengesahan pengguna, peranan, kebenaran atau ketersediaan data. Ini ialah keperluan biasa dalam aplikasi dengan laluan peribadi atau dilindungi (cth., papan pemuka pentadbir, profil pengguna atau kawasan sensitif lain).

Pengawal laluan menghalang pengguna yang tidak dibenarkan daripada mengakses laluan terhad dengan sama ada mengubah hala mereka ke halaman lain atau memaparkan mesej ralat apabila mereka cuba mengakses laluan yang tidak dibenarkan untuk dilihat.

Dalam React, pengawal laluan boleh dilaksanakan dengan menggunakan React Router dalam kombinasi dengan logik tersuai, seperti keadaan pengesahan atau kawalan akses berasaskan peranan.

---

Cara Pengawal Laluan Berfungsi

1. Semak Pengesahan Pengguna: Tentukan sama ada pengguna telah log masuk.
2. Ubah hala atau Hadkan Akses: Jika pengguna tidak dibenarkan, sama ada ubah hala mereka ke halaman log masuk, halaman yang ditolak kebenaran atau mana-mana paparan lain yang sesuai.
3. Kawalan Akses Berdasarkan Peranan: Untuk apl dengan berbilang peranan pengguna (cth., pentadbir, tetamu atau pengguna biasa), hadkan akses berdasarkan peranan pengguna.

---

Contoh Melaksanakan Pengawal Laluan dalam React

Mari kita lihat cara melaksanakan pengawal laluan menggunakan Penghala Reaksi dengan pengawal pengesahan asas. Kami akan menyemak sama ada pengguna disahkan dan memberikan laluan secara bersyarat berdasarkan itu.

---

Contoh Asas: Melindungi Laluan Berdasarkan Pengesahan

Dalam contoh ini, kami akan menggunakan pengawal laluan untuk menyemak sama ada pengguna disahkan sebelum membenarkan akses kepada laluan terhad seperti /papan pemuka.

Langkah 1: Buat Komponen Pengawal Laluan

Kami akan mencipta komponen PrivateRoute yang menyemak sama ada pengguna disahkan dan sama ada membenarkan akses kepada laluan yang dilindungi atau mengubah hala mereka ke halaman log masuk.

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

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

• Komponen PrivateRoute mengambil elemen (iaitu komponen laluan yang dilindungi), boolean isAuthenticated dan prop laluan yang lain (...rest).
• Jika isAuthenticated adalah benar, ia memaparkan komponen (elemen) yang dilindungi. Jika tidak, ia mengubah hala pengguna ke halaman log masuk menggunakan komponen.

---

Langkah 2: Sediakan Laluan dengan Pengawal Laluan

Sekarang, mari kita sediakan aplikasi utama di mana kita menggunakan PrivateRoute untuk melindungi laluan tertentu seperti /papan pemuka.

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

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

Penjelasan:

• Kami menggunakan keadaan isAuthenticated yang mudah untuk menjejak sama ada pengguna log masuk atau tidak.
• Jika pengguna log masuk (iaitu, isAuthenticated adalah benar), mereka boleh mengakses laluan /papan pemuka. Jika tidak, mereka akan diubah hala ke halaman /login.
• Komponen PrivateRoute digunakan untuk menjaga laluan /dashboard.
• Kami menogol keadaan isAuthenticated menggunakan butang log masuk. Jika pengguna mengklik butang, mereka sama ada log masuk atau log keluar.

---

Contoh 2: Pengawal Laluan Berdasarkan Peranan Pengguna

Dalam contoh ini, kami akan melaksanakan pengawal laluan yang hanya membenarkan akses kepada laluan /admin jika pengguna mempunyai peranan pentadbir.

Langkah 1: Buat Pengawal Laluan Berasaskan Peranan

Kami akan mengubah suai komponen PrivateRoute untuk mengendalikan kedua-dua pengesahan dan akses berasaskan peranan.

import React, { useState } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import PrivateRoute from './PrivateRoute'; // Import the route guard

// Simple page components
const Home = () => <h2>Home Page</h2>;
const Login = () => <h2>Login Page</h2>;
const Dashboard = () => <h2>Dashboard (Private)</h2>;

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false); // Authentication state

  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        {/* Protected route using PrivateRoute */}
        <PrivateRoute
          path="/dashboard"
          isAuthenticated={isAuthenticated}
          element={<Dashboard />}
        />
      </Routes>

      <div>
        {/* Toggle authentication state */}
        <button onClick={() => setIsAuthenticated(!isAuthenticated)}>
          {isAuthenticated ? "Logout" : "Login"}
        </button>
      </div>
    </BrowserRouter>
  );
};

export default App;

Langkah 2: Lindungi Laluan Berdasarkan Peranan

Dalam aplikasi utama, kami akan menyediakan pengawal laluan berasaskan peranan yang hanya membenarkan akses kepada laluan /admin jika pengguna ialah pentadbir.

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

// Role-based Route Guard
const RoleBasedRoute = ({ element, isAuthenticated, userRole, requiredRole, ...rest }) => {
  return (
    <Route
      {...rest}
      element={
        isAuthenticated && userRole === requiredRole
          ? element
          : <Navigate to="/login" />
      }
    />
  );
};

export default RoleBasedRoute;

Penjelasan:

• Komponen RoleBasedRoute menyemak kedua-dua sama ada pengguna disahkan dan sama ada peranan mereka sepadan dengan peranan yang diperlukan untuk laluan (cth., hanya pengguna dengan peranan 'admin' boleh mengakses halaman /admin).
• Keadaan Peranan pengguna menentukan sama ada pengguna ialah pentadbir atau pengguna biasa.
• Anda boleh menogol antara peranan 'pengguna' dan 'pentadbir' menggunakan butang.

---

Kesimpulan

Pengadang laluan ialah ciri penting untuk mengawal akses kepada bahagian tertentu aplikasi anda berdasarkan syarat seperti pengesahan dan peranan pengguna. Ia membantu meningkatkan keselamatan dan kefungsian apl anda dengan memastikan bahawa hanya pengguna yang dibenarkan boleh mengakses laluan tertentu. React Router memudahkan untuk melaksanakan pengawal laluan dengan menggunakan pemaparan bersyarat, komponen Navigate untuk ubah hala dan komponen tersuai untuk mengendalikan logik yang kompleks.

---

Atas ialah kandungan terperinci Melaksanakan Pengawal Laluan dalam Reaksi: Melindungi Laluan Anda dengan Pengesahan dan Peranan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!