Biasanya, ketika membangun aplikasi web, halaman login digunakan untuk melindungi halaman pribadi. Misalnya, untuk platform blogging, dasbor hanya dapat diakses oleh pengguna yang diautentikasi. Jika pengguna yang tidak diautentikasi mencoba mengakses halaman itu, aplikasi akan mengarahkan mereka ke halaman login. Setelah mereka masuk, mereka mendapatkan akses.
Pada artikel ini, kita akan melihat bagaimana Anda dapat mengarahkan pengguna dari halaman terbatas ke halaman login. Kami juga akan membahas bagaimana Anda dapat mengembalikan pengguna ke halaman yang mereka buka setelah masuk.
Di React Router v6, ada dua cara yang dapat Anda gunakan untuk mengarahkan ulang pengguna — komponen Navigasi dan gunakanNavigasi() kait.
Buat Aplikasi Bereaksi
Buat aplikasi React sederhana menggunakan buat-reaksi-aplikasi memerintah. Anda akan menggunakan aplikasi ini untuk menguji bagaimana komponen Navigasi dan gunakanNavigasi() pekerjaan kait.
npx membuat-react-app reaksi-redirect
Buat Halaman Masuk
Anda perlu membuat halaman Login untuk mengautentikasi pengguna. Karena ini bukan tutorial otentikasi, gunakan array objek sebagai database pengguna.
Buat file baru di src folder dan beri nama Login.js. Kemudian tambahkan kode berikut, untuk buat formulir login.
impor { status penggunaan } dari "reaksi";
impor Dasbor dari "./Dasbor";
konstan Masuk = () => {
const [nama pengguna, setusername] = useState("");
const [kata sandi, set kata sandi] = useState("");
konstan [diautentikasi, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| Salah));
const pengguna = [{ nama pengguna: "Jane", kata sandi: "kata sandi tes" }];
konstan handleSubmit = (e) => {
e.preventDefault()
konstan akun = users.find((user) => user.username nama pengguna);
jika (akun && akun.kata sandi kata sandi) {
diautentikasi (BENAR)
penyimpanan lokal.setItem("diautentikasi", BENAR);
}
};
kembali (
<div>
<p>Selamat Datang kembali</p>
<formulir onSubmit={handleSubmit}>
<memasukkan
jenis="teks"
nama="Nama belakang"
nilai={nama pengguna}
onChange={(e) => setusername (e.target.value)}
/>
<memasukkan
jenis="kata sandi"
nama="Kata sandi"
onChange={(e) => setpassword (e.target.value)}
/>
<jenis masukan ="Kirimkan" nilai ="Kirim" />
</form>
</div>
)
};
}
eksporbawaan Gabung;
Ini adalah formulir login sederhana. Ketika pengguna mengirimkan nama pengguna dan kata sandi mereka, mereka diperiksa terhadap array. Jika detail ini benar, status terotentikasi diatur ke BENAR. Karena Anda akan memeriksa apakah pengguna diautentikasi di komponen Dasbor, Anda juga perlu menyimpan status autentikasi di suatu tempat yang dapat diakses oleh komponen lain. Artikel ini menggunakan penyimpanan lokal. Dalam aplikasi nyata, menggunakan Bereaksi konteks akan menjadi pilihan yang lebih baik.
Buat Halaman Dasbor
Tambahkan kode berikut dalam file baru bernama Dasbor.js.
konstan Dasbor = () => {
kembali (
<div>
<p>Selamat datang di Dasbor Anda</p>
</div>
);
};
eksporbawaan Dasbor;
Dasbor seharusnya hanya dapat diakses oleh pengguna yang diautentikasi saja. Oleh karena itu, ketika pengguna mengunjungi halaman dasbor, periksa terlebih dahulu apakah mereka diautentikasi. Jika tidak, arahkan mereka ke halaman login.
Untuk melakukan ini, atur rute aplikasi terlebih dahulu menggunakan router React.
npm Install reaksi-router-dom
Di index.js, atur perutean untuk aplikasi Anda.
impor Reaksi dari "reaksi";
impor ReactDOM dari "reaksi-dom/klien";
impor Aplikasi dari "./Aplikasi";
impor { BrowserRouter, Rute, Rute } dari "bereaksi-router-dom";
impor Gabung dari "./Gabung";
impor Dasbor dari "./Dasbor";
konstan root = ReactDOM.createRoot(dokumen.getElementById("root"));
akar.memberikan(
<Reaksi. Mode Ketat>
<BrowserRouter>
<Rute>
<Elemen indeks rute={<Aplikasi />} />
<Jalur rute ="Gabung" elemen={<Gabung />} />
<Jalur rute ="dasbor" elemen={<Dasbor />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Lindungi Halaman Dasbor
Sekarang setelah rute aplikasi Anda diatur, langkah selanjutnya adalah jadikan rute dasbor pribadi. Saat komponen Dasbor dimuat, status autentikasi diambil dari penyimpanan lokal dan disimpan dalam status. Jika pengguna tidak diautentikasi, aplikasi akan dialihkan ke halaman login jika tidak maka akan menampilkan halaman dasbor.
impor { useEffect, useState } dari "reaksi";
konstan Dasbor = () => {
konstan [diautentikasi, diautentikasi] = useState(batal);
gunakanEfek(() => {
const loginInUser = localStorage.getItem("diautentikasi");
if (LoggedInUser) {
setauthenticated (loggedInUser);
}
}, []);
jika (!diautentikasi) {
// Alihkan
} kalau tidak {
kembali (
<div>
<p>Selamat datang di Dasbor Anda</p>
</div>
);
}
};
eksporbawaan Dasbor;
Arahkan Pengguna ke Halaman Login Menggunakan Navigasi
Komponen Navigasi menggantikan komponen Redirect yang digunakan di React Router v5. Impor Navigasi dari react-router-dom.
impor { Navigasi } dari "bereaksi-router-dom";
Untuk mengarahkan ulang pengguna yang tidak diautentikasi, gunakan sebagai berikut.
jika (!diautentikasi) {
kembali <Arahkan ganti ke="/login" />;
} kalau tidak {
kembali (
<div>
<p>Selamat datang di Dasbor Anda</p>
</div>
);
}
Komponen Navigasi adalah API deklaratif. Itu bergantung pada peristiwa pengguna, yang dalam hal ini adalah otentikasi untuk menyebabkan perubahan status dan akibatnya menyebabkan komponen dirender ulang. Perhatikan bahwa Anda tidak harus menggunakan kata kunci ganti. Menggunakannya menggantikan URL saat ini alih-alih mendorongnya ke riwayat browser.
Arahkan Pengguna ke Halaman Lain Menggunakan useNavigate()
Opsi lain untuk melakukan pengalihan di React adalah gunakanNavigasi() kait. Kait ini menyediakan akses ke API imperatif navigasi. Mulailah dengan mengimpornya dari react-router-dom.
impor { gunakan Navigasi } dari "bereaksi-router-dom";
Arahkan ulang setelah pengguna berhasil diautentikasi di menanganiKirim() fungsi seperti ini:
konstan navigasi = gunakan Navigasi();
konstan Masuk = () => {
konstan navigasi = gunakan Navigasi();
const [nama pengguna, setusername] = useState("");
const [kata sandi, set kata sandi] = useState("");
konstan [diautentikasi, diautentikasi] = useState(
localStorage.getItem (localStorage.getItem("diautentikasi") || Salah)
);
const pengguna = [{ nama pengguna: "Jane", kata sandi: "kata sandi tes" }];
konstan handleSubmit = (e) => {
e.preventDefault();
konstan akun = users.find((user) => user.username nama pengguna);
jika (akun && akun.kata sandi kata sandi) {
penyimpanan lokal.setItem("diautentikasi", BENAR);
navigasi ("/dashboard");
}
};
kembali (
<div>
<formulir onSubmit={handleSubmit}>
<memasukkan
jenis="teks"
nama="Nama belakang"
nilai={nama pengguna}
onChange={(e) => setusername (e.target.value)}
/>
<memasukkan
jenis="kata sandi"
nama="Kata sandi"
onChange={(e) => setpassword (e.target.value)}
/>
<jenis masukan ="Kirimkan" nilai ="Kirim" />
</form>
</div>
);
};
Dalam contoh ini, setelah pengguna mengirimkan formulir dengan detail yang benar, mereka akan diarahkan ke dasbor.
Saat membuat aplikasi, salah satu tujuannya adalah memberikan pengalaman terbaik kepada pengguna. Anda dapat melakukan ini dengan membawa pengguna kembali ke halaman sebelumnya dengan mengarahkan mereka ke halaman login. Anda dapat melakukan ini dengan melewatkan -1 untuk menavigasi seperti ini, navigasi (-1). Ini bertindak dengan cara yang sama seperti menekan tombol kembali di browser Anda.
Perutean di React
Dalam artikel ini, Anda mempelajari bagaimana Anda dapat mengarahkan pengguna ke halaman lain di React menggunakan komponen Navigasi dan gunakanNavigasi() kait. Artikel tersebut menggunakan formulir Login untuk mendemonstrasikan bagaimana Anda dapat mengarahkan ulang pengguna yang tidak diautentikasi dari halaman yang dilindungi ke halaman login.