Reaksinya bagus! React routers mudah digunakan untuk perutean dasar. Namun untuk penggunaan praktis, ini bukan rute /home, /nav, /login biasa. Bukan? Rute adalah gerbang masuk dan gerbang memerlukan perlindungan berdasarkan tujuannya.
Salah satu pertanyaan umum yang ditanyakan dalam perutean melalui stack overflow yang saya perhatikan akhir-akhir ini adalah tentang pagar pengaman perutean. Mari selami penerapan yang cepat dan mudah.
Misalkan saya perlu membuat halaman beranda untuk Buku Dummy saya (saya harap Anda memaafkan pembunuhan UX untuk contoh ini. RIP!). Saya tidak ingin halaman saya dialihkan ke halaman Profil kecuali saya login. Bagaimana saya bisa melakukan itu?
Mari segera buka Aplikasi kami yang memiliki opsi masuk dan keluar yang disimulasikan hanya dengan pembaruan status.
Perhatikan AuthenticationContextyang menyimpan status autentikasi. Saat ini, profil diekspos terlepas dari status otentikasi, dalam hal ini tanpa mengklik tombol Login.
Bagaimana kita melindungi rute itu? Pembungkus sederhana dapat melakukannya, yang memverifikasi autentikasi yang mengembalikan router atau pengalihan (auth-route.js di bawah).
Sekarang yang perlu Anda lakukan hanyalah mengganti Ruteprofil dengan AuthenticatedRoute yang baru kami buat. Mereka berbagi prop yang sama dengan rute dan jika tidak diautentikasi, Anda akan diarahkan ke halaman beranda. Hanya itu yang Anda butuhkan. Tentu saja, pemeriksaan autentikasi tidak bisa menjadi pemeriksaan negara, namun dapat diganti dengan mekanisme autentikasi Anda. Sekarang dengan pagar pengaman, sekarang Anda akan diarahkan ke halaman profil buku tiruan, jika login.
Jika Anda perlu melihat contoh interaktifnya, saya punya satu di kode akhir(kodedankotak) dengan UI yang cantik ;)
