Rute yang dilindungi adalah rute yang hanya memberikan akses ke pengguna yang berwenang. Ini berarti bahwa pengguna harus terlebih dahulu memenuhi persyaratan tertentu sebelum mengakses rute tertentu. Misalnya, aplikasi Anda dapat mengharuskan hanya pengguna yang masuk yang dapat mengunjungi halaman dasbor.

Dalam tutorial ini, Anda akan belajar bagaimana Anda membuat rute yang dilindungi dalam aplikasi React.

Perhatikan bahwa Anda akan menggunakan React Router v6, yang sedikit berbeda dari versi sebelumnya.

Mulai

Untuk memulai, gunakan buat-reaksi-aplikasi untuk bootstrap aplikasi React sederhana.

npx create-react-app protect-routes-react

Arahkan ke folder yang baru saja dibuat dan mulai aplikasi Anda.

cd melindungi-rute-bereaksi
npm mulai

Buka folder aplikasi Anda dengan editor teks pilihan Anda dan bersihkan. Milikmu app.js harus terlihat seperti ini.

fungsi Aplikasi() {
 kembali ;
}
ekspor Aplikasi default;

Anda sekarang siap untuk mengatur rute.

Terkait: Cara Membuat Aplikasi React Pertama Anda Dengan JavaScript

Menyiapkan Router React

Anda akan menggunakan React Router untuk mengatur navigasi untuk aplikasi Anda.

Install reaksi-router-dom.

npm install react-router-dom

Untuk aplikasi ini, Anda akan memiliki tiga halaman utama:

• Halaman beranda (halaman arahan).
• Halaman profil (dilindungi, jadi hanya pengguna yang masuk yang memiliki akses).
• Tentang halaman (publik sehingga siapa saja dapat mengaksesnya).

Di dalam Navbar.js, menggunakan Tautan komponen dari reaksi-router-dom untuk membuat tautan navigasi ke berbagai jalur.

const { Tautan } = require("react-router-dom");
const Navbar = () => {
 kembali (

 );
};
ekspor Navbar default;

Di dalam app.js buat rute yang cocok dengan tautan di menu navigasi.

import { BrowserRouter sebagai Router, Routes, Route } dari "react-router-dom";
impor Navbar dari "./Navbar";
impor Beranda dari "./Beranda";
impor Profil dari "./Profil";
impor Tentang dari "./Tentang";
fungsi Aplikasi() {
 kembali (



} />
} />
} />


 );
}
ekspor Aplikasi default;

Sekarang Anda perlu membuat komponen yang telah Anda referensikan SEBUAHpp.js.

Di dalam Beranda.js:

const Beranda = () => {
 kembali 
Halaman rumah
;
};
ekspor Beranda default;

Di dalam Profil.js

const Profil = () => {
 kembali 
Halaman profil
;
};
ekspor Profil default;

Di dalam Tentang.js

const Tentang = () => {
 kembali 
Tentang halaman
;
};
ekspor default Tentang;

Membuat Rute Terproteksi di React

Selanjutnya adalah membuat rute yang dilindungi. Itu rumah dan tentang rute bersifat publik artinya siapa pun dapat mengaksesnya, tetapi rute profil mengharuskan pengguna untuk diautentikasi terlebih dahulu. Oleh karena itu, Anda perlu membuat cara untuk login pengguna.

Menyiapkan Otentikasi Palsu

Karena ini bukan tutorial otentikasi, Anda akan menggunakan React gunakan kait negara untuk mensimulasikan sistem login.

Di dalam SEBUAHpp.js, tambahkan berikut ini.

import { Routes, Route, BrowserRouter } dari "react-router-dom";
impor { useState } dari "bereaksi";
// Pernyataan impor lainnya
fungsi Aplikasi() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const masuk = () => {
 setisLoggedIn (benar);
 };
 const logout = () => {
 setisLoggedIn (salah);
 };
 kembali (


 {Apakah sudah masuk? (
Keluar
 ): (
Gabung
 )}



 );
}
ekspor Aplikasi default;

Di sini, Anda melacak status login pengguna menggunakan status. Anda memiliki dua tombol, login, dan tombol logout. Tombol-tombol ini diberikan secara bergantian tergantung pada apakah pengguna masuk atau tidak.

Jika pengguna logout, tombol login ditampilkan. Mengkliknya akan memicu fungsi login yang akan memperbarui Apakah sudah masuk menyatakan menjadi benar dan pada gilirannya tampilan dari login ke tombol logout.

Terkait: Apa itu Otentikasi Pengguna dan Bagaimana Cara Kerjanya?

Melindungi Komponen Pribadi

Untuk melindungi rute, komponen pribadi juga harus memiliki akses ke Apakah sudah masuk nilai. Anda dapat melakukan ini dengan membuat komponen baru yang menerima Apakah sudah masuk state sebagai prop dan private component sebagai anak.

Misalnya, jika komponen baru Anda bernama "Dilindungi", Anda akan membuat komponen pribadi seperti ini.

Komponen Dilindungi akan memeriksa apakah Apakah sudah masuk benar atau salah. Jika benar, itu akan melanjutkan dan mengembalikan komponen Pribadi. Jika salah, itu akan mengarahkan pengguna ke halaman di mana mereka bisa masuk.

Pelajari lebih lanjut tentang cara lain yang dapat Anda gunakan untuk merender komponen tergantung pada kondisi dari artikel ini di rendering bersyarat di React.

Di aplikasi Anda, buat Dilindungi.js.

import { Navigasi } dari "react-router-dom";
const Dilindungi = ({ isLoggedIn, anak-anak }) => {
 jika (!Termasuk) {
 kembali ;
 }
 kembalikan anak-anak;
};
ekspor default Dilindungi;

Dalam komponen ini, pernyataan if digunakan untuk memeriksa apakah pengguna diautentikasi. Jika tidak, Navigasi dari reaksi-router-dom mengarahkan mereka ke halaman rumah. Namun, jika pengguna diautentikasi, komponen turunan akan dirender.

Menggunakan Dilindungi.js di dalam SEBUAHpp.js memodifikasi Profil rute halaman.

 jalur="/profil"
 elemen={



 }
/>

aplikasi.js harus terlihat seperti ini.

import { Routes, Route, BrowserRouter } dari "react-router-dom";
impor { useState } dari "bereaksi";
impor Navbar dari "./Navbar";
impor Dilindungi dari "./Dilindungi";
impor Beranda dari "./Beranda";
impor Tentang dari "./Tentang";
impor Profil dari "./Profil";
fungsi Aplikasi() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const masuk = () => {
 setisLoggedIn (benar);
 };
 const logout = () => {
 setisLoggedIn (salah);
 };
 kembali (




 {Apakah sudah masuk? (
Keluar
 ): (
Gabung
 )}

} />
 elemen={



 }
 />
} />





 );
}
ekspor Aplikasi default;

Itu saja untuk membuat rute yang dilindungi. Anda sekarang dapat mengakses halaman Profil hanya jika Anda masuk. Jika Anda mencoba menavigasi ke halaman Profil tanpa login, Anda akan diarahkan ke halaman beranda.

Kontrol Akses Berbasis Peran

Tutorial ini menunjukkan kepada Anda bagaimana Anda dapat membatasi pengguna yang tidak diautentikasi untuk mengakses halaman dalam aplikasi React. Dalam beberapa kasus, Anda mungkin perlu melangkah lebih jauh dan membatasi pengguna berdasarkan peran mereka. Misalnya, Anda dapat memiliki halaman yang mengatakan halaman analitik yang hanya memberikan akses ke admin. Di sini, Anda perlu menambahkan logika di komponen Dilindungi yang memeriksa apakah pengguna memenuhi persyaratan yang diperlukan.

Bagaimana Menerapkan Rendering Bersyarat di React.js (Dengan Contoh)

Render bersyarat adalah cara yang berguna untuk meningkatkan aplikasi Anda. Berikut adalah pilihan cara menggunakannya.

Baca Selanjutnya

Tentang Penulis