React İle Protected Route Kullanarak Sayfa Yetkilendirme Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Uygulamaya başlamadan önce sisteminizde Node.js'in güncel bir sürümünün (v20 veya üzeri önerilir) yüklü olduğundan emin olun. Projenizde React Router'ın en güncel sürümünü kullanacağız. Kurulum için terminalinizde şu komutları çalıştırarak gerekli bağımlılıkları projenize dahil edebilirsiniz:

npm install react-router-dom

Bu paket, React uygulamalarında çok sayfalı bir yapı kurmamızı ve URL değişimlerini yönetmemizi sağlayan endüstri standardıdır. Kurulum sonrası, projenizin kök dizininde bir auth klasörü oluşturarak yetkilendirme mantığını burada merkezileştirmek, sürdürülebilirlik açısından en iyi pratiktir.

Adım 1: Kimlik Doğrulama Bağlamını (Auth Context) Oluşturma

Kullanıcının giriş yapıp yapmadığını tüm uygulamada takip edebilmek için React'in Context API yapısını kullanmalıyız. Bu, her bileşene ayrı ayrı prop göndermek yerine, merkezi bir "doğruluk kaynağı" oluşturmamızı sağlar.

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    
      {children}
    
  );
};

export const useAuth = () => useContext(AuthContext);

Yukarıdaki kod bloğu, kullanıcının oturum durumunu tutan bir sağlayıcı oluşturur. useAuth hook'u sayesinde, uygulamanın herhangi bir yerinden user verisine erişebilir veya login/logout fonksiyonlarını tetikleyebiliriz.

Adım 2: Protected Route Bileşenini Tasarlama

Protected Route, bir kullanıcının yetkisi yoksa onu giriş sayfasına yönlendiren bir sarmalayıcı (wrapper) bileşendir. Bu bileşen, react-router-dom kütüphanesinden gelen Navigate bileşenini kullanarak yönlendirme işlemini gerçekleştirir.

import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './AuthContext';

const ProtectedRoute = () => {
  const { user } = useAuth();

  if (!user) {
    return ;
  }

  return ;
};

Burada Outlet kullanımı kritiktir; çünkü Outlet, korunan rotanın altındaki bileşenlerin render edilmesini sağlar. Eğer kullanıcı giriş yapmamışsa, Navigate bileşeni onu /login rotasına gönderir ve replace prop'u sayesinde tarayıcı geçmişinde bir önceki sayfaya geri dönme karmaşasını engeller.

Adım 3: Router Yapılandırması ve Rotaları Koruma

Oluşturduğumuz ProtectedRoute bileşenini, ana router yapılandırmamızda kullanarak belirli sayfaları koruma altına alıyoruz. Bu yöntem, uygulamanızdaki tüm özel sayfaları tek bir çatı altında toplamanıza olanak tanır.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './AuthContext';

function App() {
  return (
    
      
        
          
          
            
            
          
        
      
    
  );
}

Bu yapıda /dashboard ve /profile rotaları, ProtectedRoute bileşeninin içine yerleştirilmiştir. Bu sayede, bu rotalara erişilmeye çalışıldığında önce ProtectedRoute kontrolü çalışır.

Adım 4: Yetkilendirme Yöntemlerinin Karşılaştırılması

Aşağıdaki tablo, React uygulamalarında yetkilendirme yaparken kullanılan farklı yaklaşımların avantaj ve dezavantajlarını özetlemektedir.

Adım 5: Güvenlik ve Hata Yönetimi

Kritik Uyarı: Frontend tarafındaki yetkilendirme sadece bir kullanıcı deneyimi iyileştirmesidir. Gerçek güvenlik her zaman backend tarafında (API seviyesinde) JWT veya Session doğrulaması ile sağlanmalıdır. Frontend'de gizlediğiniz bir buton, API'ye yapılan doğrudan bir isteği engellemez.

Uygulamanızda XSS (Cross-Site Scripting) saldırılarından korunmak için kullanıcı verilerini tarayıcıda saklarken dikkatli olun. Mümkünse HTTP-only cookie'leri tercih edin. Ayrıca, yetkilendirme başarısız olduğunda kullanıcıya net bir geri bildirim (örneğin "Lütfen giriş yapın") sunmak, kullanıcı deneyimini artırır.

Sıkça Sorulan Sorular

ProtectedRoute neden bazen çalışmıyor?

Genellikle AuthProvider'ın Routes bileşenini sarmalamamasından kaynaklanır. useAuth hook'unun çalışması için bileşenin AuthProvider içinde olması gerekir.

Sayfa yenilendiğinde giriş durumu neden kayboluyor?

Context API, uygulama yenilendiğinde state'i sıfırlar. Bu sorunu çözmek için localStorage veya sessionStorage kullanarak kullanıcı verisini kalıcı hale getirmeli ve AuthProvider içinde useEffect ile bunu kontrol etmelisiniz.

Birden fazla rol (admin/user) nasıl yönetilir?

ProtectedRoute bileşenine allowedRoles gibi bir prop ekleyerek, kullanıcının rolünü user nesnesi üzerinden kontrol edebilir ve yetkisi yoksa "Erişim Engellendi" sayfasına yönlendirebilirsiniz.

Lazy Loading kullanırken ProtectedRoute etkilenir mi?

Hayır, React.lazy ve Suspense ile sayfaları dinamik yüklemek, yetkilendirme mantığını bozmaz. Sadece Suspense bileşenini ProtectedRoute içine yerleştirmeniz yeterlidir.

API'den gelen 401 hatalarını nasıl yönetirim?

Axios interceptor kullanarak, her API isteğinde 401 (Unauthorized) hatası alırsanız, useAuth içindeki logout fonksiyonunu tetikleyerek kullanıcıyı otomatik olarak giriş sayfasına yönlendirebilirsiniz.

İleri Seviye İpuçları: Protected Route Yapısını Ölçeklendirme

Uygulamanız büyüdükçe, basit bir isAuthenticated kontrolü yetersiz kalabilir. Özellikle büyük ölçekli kurumsal projelerde, kullanıcıların sadece giriş yapmış olması değil, aynı zamanda belirli kaynaklara erişim için "yetki seviyeleri" (permissions) de önem kazanır. İşte bu yapıyı daha modüler hale getirmek için kullanabileceğiniz ileri seviye teknikler:

Yetki Bazlı Erişim Kontrolü (RBAC)

Kullanıcıların rollerine göre sayfaları sınırlandırmak için ProtectedRoute bileşeninizi bir allowedRoles prop'u alacak şekilde güncelleyebilirsiniz. Bu sayede, "admin" yetkisi gerektiren bir sayfaya "user" rolündeki birinin girmesini engelleyebilirsiniz.

const ProtectedRoute = ({ children, allowedRoles }) => {
  const { user } = useAuth();

  if (!user) {
    return ;
  }

  if (allowedRoles && !allowedRoles.includes(user.role)) {
    return ;
  }

  return children;
};

// Kullanımı:

Hata Ayıklama ve Gözlemlenebilirlik

Yetkilendirme süreçlerinde yaşanan sorunlar genellikle "sessiz hata" olarak adlandırılır; yani kullanıcı hiçbir şey görmez ve sadece boş bir sayfa ile karşılaşır. Bu durumu engellemek için geliştirme aşamasında şu yöntemleri izlemelisiniz:

• Logging: Yetkilendirme kontrolü başarısız olduğunda konsola açıklayıcı bir hata mesajı yazdırın.
• Loading States: Auth durumu API'den çekilirken (asenkron işlem süresince) kullanıcıyı boş ekranda bırakmak yerine bir LoadingSpinner gösterin.
• Breadcrumbs ve Redirects: Kullanıcıyı yönlendirdiğiniz sayfada, neden oraya yönlendirildiğine dair bir "toast" mesajı (Örn: "Bu sayfayı görmek için yetkiniz yok") göstermek kullanıcı deneyimini iyileştirir.

Performans Optimizasyonu

React Context API, her değer değişiminde tüm alt bileşenleri yeniden render eder. Eğer AuthContext üzerinde çok fazla veri tutuyorsanız, uygulamanızın performansında düşüş yaşanabilir. Bunu engellemek için useMemo ve useCallback kullanarak bağlam değerlerini optimize edin.

const value = useMemo(() => ({
  user,
  login,
  logout
}), [user, login, logout]);

return {children};

Bu optimizasyon, AuthContext'i kullanan bileşenlerin, sadece ilgili değerler değiştiğinde yeniden render edilmesini sağlar. Küçük bir dokunuş gibi görünse de, karmaşık dashboard yapılarında gereksiz render işlemlerini %30 oranında azaltabilir.

Sonuç

React ile Protected Route kullanarak sayfa yetkilendirme yapmak, uygulamanızın güvenliğini ve düzenini sağlayan temel bir adımdır. Bu rehberde öğrendiğiniz Context API ve Outlet yapısı, profesyonel projelerde kullanılan en temiz yöntemlerden biridir. Bir sonraki adım olarak, backend tarafında JWT (JSON Web Token) doğrulamasını entegre ederek uygulamanızı uçtan uca güvenli hale getirebilirsiniz. Unutmayın, güvenlik katmanlı bir süreçtir; hem frontend hem de backend tarafında eşgüdümlü çalışmak sizi her zaman daha güvende tutar.