Korumalı yollar, yalnızca yetkili kullanıcılara erişim izni veren yollardır. Bu, kullanıcıların bu belirli rotaya erişmeden önce belirli koşulları yerine getirmeleri gerektiği anlamına gelir. Örneğin, uygulamanız yalnızca oturum açmış kullanıcıların pano sayfasını ziyaret edebilmesini gerektirebilir.

Bu öğreticide, react uygulamasında korumalı yolları nasıl oluşturduğunu öğreneceksiniz.

Önceki sürümlerden biraz farklı olan React Router v6’ı kullanacaksınız.

Başlarken

Başlamak için, basit bir React uygulamasını önyüklemek için create-react-uygulamasını kullanın.

npx create-react-app protect-routes-react

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

cd protect-routes-react
npm start

Uygulama klasörünüzü tercih edilen metin düzenleyicinizle açın ve temizleyin. Sizin uygulama.js Böyle görünmeli.

function App() {
return 
;
}
export default App;

Artık rotaları ayarlamaya hazırsınız.

İlgili: JavaScript ile İlk React Uygulamanızı Oluşturma

React Yönlendiricisini Ayarlama

Uygulamanız için gezintiyi ayarlamak üzere React Router’ı kullanacaksınız.

Yüklemek react-yönlendirici-dom.

npm install react-router-dom

Bu uygulama için üç ana sayfanız olacaktır:

• Giriş sayfası (açılış sayfası).
• Profil sayfası (korumalıdır, bu nedenle yalnızca oturum açmış kullanıcıların erişimi vardır).
• Sayfa hakkında (herkese açık, böylece herkes erişebilir).

İçinde Navbar mı.jsöğesini kullanın. Bağlantı bileşen react-yönlendirici-dom çeşitli yollara gezinti bağlantıları oluşturmak için.

const { Link } = require("react-router-dom");
const Navbar = () => {
return (

);
};
export default Navbar;

İçinde uygulama.js gezinti menüsündeki bağlantılarla eşleşen yolları oluşturun.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Navbar";
import Home from "./Home";
import Profile from "./Profile";
import About from "./About";
function App() {
return (



} />
} />
} />


);
}
export default App;

Şimdi, başvuruda bulunan bileşenleri oluşturmanız gerekir App.js.

İçinde Eve.js:

const Home = () => {
return 
Home page
;
};
export default Home;

İçinde Profil mi.js

const Profile = () => {
return 
Profile Page
;
};
export default Profile;

İçinde Yaklaşık.js

const About = () => {
return 
About page
;
};
export default About;

React’te Korumalı Yollar Oluşturma

Sırada korumalı yollar oluşturuluyor. Bu, bir sonraki ev ve hakkında yollar herkese açıktır, yani herkes bunlara erişebilir, ancak profil yolu önce kullanıcıların kimliğinin doğru olmasını gerektirir. Bu nedenle, kullanıcıları oturum açmak için bir yol oluşturmanız gerekir.

Sahte Kimlik Doğrulamayı Ayarlama

Bu bir kimlik doğrulama öğreticisi olmadığından, bir giriş sistemini simüle etmek için React useState kancasını kullanacaksınız.

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

import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
// Other import stamements 
function App() {
const (isLoggedIn, setisLoggedIn) = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (


{isLoggedIn ? (
Logout
) : (
Login
)}



);
}
export default App;

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

Kullanıcı oturumu kapatmışsa, oturum açma düğmesi görüntülenir. Üzerine tıklanın, oturum açma işlevini tetikleyecek ve isLoggedIn durumu doğru ve sırayla oturum açma düğmesine girişten ekran.

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

Özel Bileşenleri Koruma

Rotaları korumak için, özel bileşenlerin de isLoggedIn değer. Bunu, isLoggedIn prop olarak durum ve alt olarak özel bileşen.

Örneğin, yeni bileşeniniz “Korumalı” olarak adlandırılırsa, bunun gibi özel bir bileşen işlersiniz.

Korumalı bileşen, isLoggedIn doğru veya yanlıştır. Eğer doğruysa, devam eder ve Özel bileşenini döndürür. Yanlışsa, kullanıcıyı oturum açabilecekleri bir sayfaya yönlendirir.

React’te koşullu işleme hakkındaki bu makaledeki koşullara bağlı olarak bir bileşeni işlemek için kullanabileceğiniz diğer yollar hakkında daha fazla bilgi edinin.

Uygulamanızda, Korunuyor.js.

import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
if (!isLoggedIn) {
return ;
}
return children;
};
export default Protected;

Bu bileşende, if deyimi kullanıcının kimliğinin doğrulanıp doğrulanmadığını denetlemek için kullanılır. Eğer değillerse, Gezin Kaynak react-yönlendirici-dom bunları giriş sayfasına yönlendirir. Ancak, kullanıcının kimliği doğrulanırsa, alt bileşen işlenir.

Kullanmak Korunuyor.js içinde App.js değiştirme Profil sayfa yolu.

path="/profile"
element={



}
/>

Uygulama.js Böyle görünmeli.

import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
import Navbar from "./Navbar";
import Protected from "./Protected";
import Home from "./Home";
import About from "./About";
import Profile from "./Profile";
function App() {
const (isLoggedIn, setisLoggedIn) = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (



{isLoggedIn ? (
Logout
) : (
Login
)}

} />
element={



}
/>
} />



);
}
export default App;

Korumalı rotalar oluşturmak için bu kadar. Artık Profil sayfasına yalnızca oturum açtıysanız erişebilirsiniz. Giriş yapmadan Profil sayfasına gitmenizi denerseniz, giriş sayfasına yönlendirilirsiniz.

Rol Tabanlı Erişim Denetimi

Bu öğretici, kimlik doğrulaması olmayan kullanıcıların React uygulamasındaki 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, bir sayfanın yalnızca yöneticilere erişim izni veren bir analiz sayfası söylemesini sağlayabilirsiniz. Burada, korumalı bileşene bir kullanıcının gerekli koşulları karşılayıp karşılamadığını denetleyen mantık eklemeniz gerekir.