Gereksinimler ve Ön Hazırlık

Uygulamaya başlamadan önce sisteminizde Node.js (20.x veya üzeri) ve paket yöneticisi olarak npm veya pnpm yüklü olmalıdır. React projenizi Vite kullanarak oluşturmanızı öneririz, çünkü hızlı derleme ve modern yapılandırma sunar.

• React 19+ sürümü (Hook tabanlı yapı için).
• React Router 7+ (Sayfa bazlı yetkilendirme yönlendirmeleri için).
• Temel JavaScript (ES6+) ve TypeScript bilgisi (Tip güvenliği için önerilir).

Projenizi başlatmak için terminalinizde npm create vite@latest izin-sistemi -- --template react-ts komutunu çalıştırarak temel kurulumu yapabilirsiniz.

Adım 1: İzin Yönetimi İçin Context Yapısını Kurma

İzin verilerini uygulamanın her yerinden erişilebilir kılmak için React Context API kullanacağız. Bu, prop drilling (veriyi alt bileşenlere sürekli aktarma) sorununu ortadan kaldırır ve merkezi bir yönetim sağlar.

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

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState({ roles: ['user'], permissions: ['read'] });

  const hasPermission = (permission) => {
    return user.permissions.includes(permission);
  };

  return (
    
      {children}
    
  );
};

Yukarıdaki kodda, kullanıcının sahip olduğu rolleri ve izinleri tutan bir sağlayıcı oluşturduk. hasPermission fonksiyonu, belirli bir iznin kullanıcıda olup olmadığını kontrol eden yardımcı bir fonksiyondur.

Adım 2: İzin Kontrollü Bileşen (Protected Component) Oluşturma

Sadece belirli izinlere sahip kullanıcıların görmesi gereken bileşenleri sarmalamak için bir "HOC" (Higher-Order Component) veya bir wrapper bileşeni oluşturmalıyız. Bu, kodunuzun temiz ve okunabilir kalmasını sağlar.

const ProtectedComponent = ({ permission, children }) => {
  const { hasPermission } = useContext(AuthContext);

  if (!hasPermission(permission)) {
    return 
Bu içeriği görme yetkiniz yok.
;
  }

  return {children};
};

Bu bileşeni, örneğin bir "Sil" butonunu sarmalamak için Sil şeklinde kullanabilirsiniz.

Adım 3: Rota Bazlı Yetkilendirme Stratejisi

Sayfaların tamamını korumak için React Router ile "Private Route" yapısı kurmak en güvenli yoldur. Bu, kullanıcı giriş yapmadığında veya yetkisi olmadığında doğrudan giriş sayfasına yönlendirilmesini sağlar.

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children, requiredRole }) => {
  const { user } = useContext(AuthContext);

  if (!user || !user.roles.includes(requiredRole)) {
    return ;
  }

  return children;
};

Bu yapı, uygulamanızın kritik sayfalarına (admin paneli gibi) yetkisiz erişimi engeller. replace özelliği, kullanıcının tarayıcı geçmişinde yetkisiz sayfaya geri dönmesini engellemek için kullanılır.

Adım 4: İzin Yönetim Yöntemlerinin Karşılaştırılması

Adım 5: Güvenlik Uyarıları ve En İyi Pratikler

Önemli Güvenlik Uyarısı: Frontend tarafındaki izin kontrolleri yalnızca kullanıcı deneyimini iyileştirmek içindir. Asıl yetkilendirme ve doğrulama mutlaka backend (sunucu) tarafında yapılmalıdır. Frontend'deki kontrolleri devre dışı bırakmak, kötü niyetli bir kullanıcının API isteklerini manipüle etmesini engellemez.

XSS (Cross-Site Scripting) saldırılarına karşı kullanıcı izinlerini localStorage yerine güvenli HTTP-only çerezlerde saklamayı tercih edin. Ayrıca, API yanıtlarını her zaman sunucu tarafında tekrar kontrol edin.

Adım 6: Hata Ayıklama ve Test Etme

İzin sisteminizi test ederken, farklı rollere sahip kullanıcıları simüle eden "Mock" veriler kullanın. Geliştirici araçlarında (React DevTools) Context değerlerini anlık olarak değiştirerek UI'ın nasıl tepki verdiğini gözlemleyebilirsiniz.

// Test için basit bir yardımcı fonksiyon
const testPermission = (user, permission) => {
  return user.permissions.includes(permission);
};

console.log(testPermission({ permissions: ['read'] }, 'write')); // false

Bu testler, izin mantığınızın beklediğiniz gibi çalışıp çalışmadığını doğrulamak için kritik öneme sahiptir.

Sıkça Sorulan Sorular

Frontend tarafındaki izinler güvenli mi?

Hayır, frontend izinleri sadece kullanıcı arayüzünü yönetmek içindir. Gerçek güvenlik her zaman sunucu (API) tarafında sağlanmalıdır.

Neden Context API yerine Redux kullanmalıyım?

Uygulamanız çok fazla state değişimine sahipse ve izinler dinamik olarak sürekli güncelleniyorsa, Redux veya Zustand gibi kütüphaneler daha optimize bir performans sunar.

Kullanıcı rolü değiştiğinde ne yapmalıyım?

Kullanıcı rolü değiştiğinde, Context içindeki state'i güncellemeli ve uygulamayı yeniden render etmelisiniz. Genellikle bu işlem bir API yanıtından sonra tetiklenir.

İzinleri nasıl dinamik alabilirim?

Kullanıcı giriş yaptığında izinleri bir API'den çekip, useEffect kullanarak Context state'ine set etmelisiniz.

Sayfa geçişlerinde izin kontrolü nasıl yapılır?

React Router'ın loader fonksiyonlarını kullanarak, sayfa yüklenmeden önce kullanıcının yetkisi olup olmadığını kontrol edebilir ve gerekirse yönlendirme yapabilirsiniz.

İleri Seviye İzin Yönetimi: HOC (Higher-Order Components) Yaklaşımı

Context API ve Custom Hook yapısı modern React uygulamalarında standart olsa da, daha karmaşık ve modüler bir yapı için Higher-Order Components (HOC) desenini kullanmak, kodunuzun temizliğini artırabilir. HOC, bir bileşeni alıp ona ek yetenekler kazandıran bir fonksiyondur. Özellikle belirli izinlere sahip olmayan bileşenleri tamamen render etmemek veya farklı bir "Erişim Reddedildi" bileşeni göstermek için idealdir.

const withPermission = (WrappedComponent, requiredPermission) => {
  return (props) => {
    const { userPermissions } = useAuth(); // Context'ten gelen veriler

    if (!userPermissions.includes(requiredPermission)) {
      return 
Bu içeriği görme yetkiniz yok.
;
    }

    return ;
  };
};

// Kullanımı:
const AdminDashboard = () => 
Yönetici Paneli
;
export default withPermission(AdminDashboard, 'ADMIN_ACCESS');

Performans Optimizasyonu ve İzinlerin Önbelleğe Alınması

Uygulamanız büyüdükçe, her render döngüsünde izin kontrolü yapmak performans kaybına yol açabilir. İzinlerinizi bir kez hesaplayıp memoize etmek, uygulamanın tepki süresini iyileştirir. useMemo ve useCallback kullanarak, kullanıcı bilgisi veya izin listesi değişmediği sürece hesaplamaların tekrar çalışmasını engelleyebilirsiniz.

Ayrıca, büyük izin listeleriyle çalışırken diziler (array) yerine Set veri yapısını kullanmak, arama (lookup) işlemlerini O(n) karmaşıklığından O(1) karmaşıklığına düşürür. Bu, özellikle yüzlerce farklı yetkinin olduğu kurumsal uygulamalarda kritik bir fark yaratır.

import { useMemo } from 'react';

const usePermissionCheck = (requiredPermission) => {
  const { userPermissions } = useAuth();

  // İzinleri Set yapısına çevirerek performanslı arama yapıyoruz
  const permissionSet = useMemo(() => new Set(userPermissions), [userPermissions]);

  const hasPermission = useMemo(() => {
    return permissionSet.has(requiredPermission);
  }, [permissionSet, requiredPermission]);

  return hasPermission;
};

Alternatif Kütüphaneler: Casl.js ile Yetkilendirme

Kendi izin sisteminizi yazmak esneklik sağlasa da, karmaşık kurallar (örneğin: "sadece kendi oluşturduğu gönderileri düzenleyebilir") söz konusu olduğunda CASL gibi kütüphaneler kullanmak daha güvenli ve sürdürülebilirdir. CASL, "Ability" tabanlı bir model sunar ve React ile entegrasyonu oldukça güçlüdür.

CASL kullanırken, izinleri bir "Ability" nesnesinde toplarsınız ve bileşenlerinizde can('read', 'Post') gibi okunabilir ifadelerle yetki kontrolü yaparsınız. Bu, iş mantığını bileşenlerden ayırarak test edilebilirliği artırır.

Sonuç

React ile etkili bir izin kontrol sistemi kurmak, uygulamanızın güvenliğini ve kullanıcı deneyimini doğrudan etkiler. Bu rehberde öğrendiğiniz Context API kullanımı, bileşen sarmalama ve rota koruma teknikleri, profesyonel seviyede bir yetkilendirme mimarisi için temel oluşturur. Bir sonraki adım olarak, JWT (JSON Web Token) kullanarak bu izinleri sunucu tarafında nasıl doğrulayacağınızı araştırmanızı öneririm.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, tüm güvenlik açıklarını (XSS, CSRF, API manipülasyonu) göz önünde bulundurmalı ve profesyonel güvenlik testleri yapmalısınız.