Korumalı rotalar, yalnızca yetkili kullanıcılara erişim sağlayan rotalardır. Bu, kullanıcıların belirli bir rotaya erişmeden önce belirli koşulları karşılaması gerektiği anlamına gelir. Örneğin, uygulamanız yalnızca oturum açmış kullanıcıların gösterge tablosu sayfasını ziyaret edebilmesini gerektirebilir.

Bu öğreticide, bir React uygulamasında korumalı rotaları nasıl oluşturacağınızı öğreneceksiniz.

Önceki sürümlerden biraz farklı olan React Router v6 kullanacağınızı unutmayın.

Başlarken

Başlamak için şunu kullanın: oluştur-tepki-uygulaması basit bir React uygulamasını önyüklemek için.

npx oluştur-tepki-uygulama koruma-rotalar-tepki

Yeni oluşturulan klasöre gidin ve uygulamanızı başlatın.

cd koruma yolları-tepki
npm başlangıç

Uygulama klasörünüzü tercih ettiğiniz metin düzenleyiciyle açın ve temizleyin. Senin app.js böyle görünmelidir.

işlev Uygulama() {
 dönüş ;
}
varsayılan Uygulamayı dışa aktar;

Artık rotaları oluşturmaya hazırsınız.

İlişkili: JavaScript ile İlk React Uygulamanızı Nasıl Oluşturursunuz?

React Router'ı Ayarlama

Uygulamanız için navigasyonu ayarlamak için React Router'ı kullanacaksınız.

Düzenlemek tepki-yönlendirici-dom.

npm install tepki-yönlendirici-dom

Bu uygulama için üç ana sayfanız olacak:

• Ana sayfa (açılış sayfası).
• Profil sayfası (korumalı, bu nedenle yalnızca oturum açmış kullanıcılar erişebilir).
• Hakkında sayfası (herkesin erişebilmesi için herkese açık).

İçinde Navbar.js, kullan Bağlantı bileşen tepki-yönlendirici-dom çeşitli yollara navigasyon bağlantıları oluşturmak için.

const { Bağlantı } = require("tepki-yönlendirici-dom");
const Navbar = () => {
 dönüş (

 );
};
varsayılan Navbar'ı dışa aktar;

İçinde app.js navigasyon menüsündeki bağlantılarla eşleşen rotaları oluşturun.

"react-router-dom"dan { BrowserRouter as Router, Routes, Route } içe aktarın;
Navbar'ı "./Navbar"dan içe aktar;
Ana Sayfayı "./Home"dan içe aktarın;
Profili "./Profile" dosyasından içe aktar;
Hakkında'yı "./Hakkında"dan içe aktar;
işlev Uygulama() {
 dönüş (



} />
} />
} />


 );
}
varsayılan Uygulamayı dışa aktar;

Şimdi referans verdiğiniz bileşenleri oluşturmanız gerekiyor. App.js.

İçinde Home.js:

const Ana Sayfa = () => {
 dönüş 
ana sayfa
;
};
varsayılan Ana Sayfayı dışa aktar;

İçinde Profil.js

const Profil = () => {
 dönüş 
Profil sayfası
;
};
varsayılan Profili dışa aktar;

İçinde About.js

const Hakkında = () => {
 dönüş 
Hakkında sayfası
;
};
varsayılanı dışa aktar Hakkında;

React'te Korumalı Rotalar Oluşturma

Sıradaki, korumalı rotalar oluşturmak. bu ev ve hakkında rotalar herkese açıktır, yani herkes bunlara erişebilir, ancak profil rotası önce kullanıcıların kimliğinin doğrulanmasını gerektirir. Bu nedenle, kullanıcılara giriş yapmak için bir yol oluşturmanız gerekir.

Sahte Kimlik Doğrulamayı Ayarlama

Bu bir kimlik doğrulama öğreticisi olmadığı için React'i kullanacaksınız. kullanım durumu kancası Bir oturum açma sistemini simüle etmek için.

İçinde App.js, aşağıdakileri ekleyin.

"react-router-dom"dan { Routes, Route, BrowserRouter } içe aktarın;
"tepki" den { useState } içe aktar;
// Diğer içe aktarma ifadeleri
işlev Uygulama() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (doğru);
 };
 const logOut = () => {
 setisLoggedIn (yanlış);
 };
 dönüş (


 {isLoggedIn? (
Çıkış Yap
 ): (
Giriş yapmak
 )}



 );
}
varsayılan Uygulamayı dışa aktar;

Burada, durumu kullanan kullanıcının oturum açma durumunu izliyorsunuz. İki düğmeniz var, giriş ve çıkış düğmesi. Bu düğmeler, bir kullanıcının oturum açıp açmadığına bağlı olarak sırayla işlenir.

Kullanıcı oturumu kapatırsa, oturum açma düğmesi görüntülenir. Üzerine tıklamak, oturumu güncelleyecek olan oturum açma işlevini tetikleyecektir. Giriş Yapıldı durumu true olarak ayarlayın ve ardından ekranı oturum açmadan oturumu kapatma düğmesine çevirin.

İlişkili: Kullanıcı Kimlik Doğrulaması Nedir ve Nasıl Çalışır?

Özel Bileşenleri Koruma

Rotaları korumak için, özel bileşenlerin de erişime sahip olması gerekir. Giriş Yapıldı değer. Bunu kabul eden yeni bir bileşen oluşturarak yapabilirsiniz. Giriş Yapıldı destek olarak durum ve çocuk olarak özel bileşen.

Örneğin, yeni bileşeniniz "Korumalı" olarak adlandırılmışsa, bunun gibi özel bir bileşen oluşturursunuz.

Korumalı bileşen, Giriş Yapıldı doğrudur veya yanlıştır. Doğruysa, devam edecek ve Özel bileşeni döndürecektir. Yanlış ise, kullanıcıyı oturum açabilecekleri bir sayfaya yönlendirir.

Bu makaleden koşullara bağlı olarak bir bileşeni işlemek için kullanabileceğiniz diğer yollar hakkında daha fazla bilgi edinin. React'te koşullu oluşturma.

Uygulamanızda, oluşturun Protected.js.

"react-router-dom"dan { Navigate } dosyasını içe aktarın;
const Korumalı = ({ isLoggedIn, çocuklar }) => {
 if (!isLoggedIn) {
 dönüş ;
 }
 çocukları iade et;
};
varsayılanı dışa aktar Korumalı;

Bu bileşende, kullanıcının kimliğinin doğrulanıp doğrulanmadığını kontrol etmek için if ifadesi kullanılır. Değillerse, Gezin itibaren tepki-yönlendirici-dom onları ana sayfaya yönlendirir. Ancak, kullanıcının kimliği doğrulanırsa alt bileşen oluşturulur.

Kullanmak Protected.js içinde App.js Değiştirmek Profil sayfa yolu.

 yol="/profil"
 eleman={



 }
/>

App.js böyle görünmelidir.

"react-router-dom"dan { Routes, Route, BrowserRouter } içe aktarın;
"tepki" den { useState } içe aktar;
Navbar'ı "./Navbar"dan içe aktar;
ithalat Korumalı "./Korumalı";
Ana Sayfayı "./Home"dan içe aktarın;
Hakkında'yı "./Hakkında"dan içe aktar;
Profili "./Profile" dosyasından içe aktar;
işlev Uygulama() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (doğru);
 };
 const logOut = () => {
 setisLoggedIn (yanlış);
 };
 dönüş (




 {isLoggedIn? (
Çıkış Yap
 ): (
Giriş yapmak
 )}

} />
 eleman={



 }
 />
} />





 );
}
varsayılan Uygulamayı dışa aktar;

Korumalı rotalar oluşturmak için bu kadar. Artık Profil sayfasına yalnızca giriş yaptıysanız erişebilirsiniz. Giriş yapmadan Profil sayfasına gitmeye çalışırsanız, ana sayfaya yönlendirileceksiniz.

Rol Tabanlı Erişim Kontrolü

Bu eğitici, kimliği doğrulanmamış kullanıcıların bir React uygulamasında bir sayfaya erişmesini nasıl kısıtlayabileceğinizi gösterdi. Bazı durumlarda, daha da ileri gitmeniz ve kullanıcıları rollerine göre kısıtlamanız gerekebilir. Örneğin, yalnızca yöneticilere erişim izni veren bir analiz sayfası söyleyen bir sayfanız olabilir. Burada, bir kullanıcının gerekli koşulları karşılayıp karşılamadığını kontrol eden Korumalı bileşene mantık eklemeniz gerekecektir.

React.js'de Koşullu Oluşturma Nasıl Uygulanır (Örneklerle)

Koşullu oluşturma, uygulamanızı iyileştirmenin yararlı bir yoludur. İşte onu kullanmanın bir dizi yolu.

Sonrakini Oku

Yazar hakkında