{"id":31332,"date":"2025-10-08T19:41:24","date_gmt":"2025-10-08T16:41:24","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31332"},"modified":"2025-10-08T19:41:24","modified_gmt":"2025-10-08T16:41:24","slug":"react-uygulamalarinda-basit-yetkilendirme-yontemleri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/","title":{"rendered":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri"},"content":{"rendered":"<p><body><\/p>\n<h2>React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri<\/h2>\n<h3>Giri\u015f<\/h3>\n<p>Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n farkl\u0131 seviyelerde eri\u015fim yetkilerine sahip olmas\u0131n\u0131 gerektiren karma\u015f\u0131k i\u015flevsellikler sunar. Bir kullan\u0131c\u0131 bir makaleyi d\u00fczenleyebilirken, ba\u015fka bir kullan\u0131c\u0131 sadece g\u00f6r\u00fcnt\u00fcleyebilir veya bir y\u00f6netici t\u00fcm kullan\u0131c\u0131 hesaplar\u0131n\u0131 y\u00f6netebilir. Bu t\u00fcr eri\u015fim kontrol\u00fc, yetkilendirme (authorization) olarak bilinir ve uygulaman\u0131n g\u00fcvenli\u011fi ve kullan\u0131c\u0131 deneyimi i\u00e7in kritik \u00f6neme sahiptir. React gibi istemci taraf\u0131 (client-side) bir k\u00fct\u00fcphane ile geli\u015ftirilen uygulamalarda, yetkilendirme mant\u0131\u011f\u0131n\u0131 etkili bir \u015fekilde y\u00f6netmek, hem kodun okunabilirli\u011fini art\u0131r\u0131r hem de uygulaman\u0131n \u00f6l\u00e7eklenebilirli\u011fini sa\u011flar.<\/p>\n<p>Bu makalede, React uygulamalar\u0131nda basit yetkilendirme mekanizmalar\u0131n\u0131 nas\u0131l uygulayabilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. Temel kavramlardan ba\u015flayarak, React Context API, Higher-Order Components (HOCs), Render Props deseni ve \u00f6zel hook&#8217;lar gibi \u00e7e\u015fitli yakla\u015f\u0131mlar\u0131 ele alacak, rota koruma ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) elementlerinin yetkilendirilmesi gibi pratik senaryolar \u00fczerinde duraca\u011f\u0131z. Ayr\u0131ca, frontend yetkilendirmenin g\u00fcvenlik s\u0131n\u0131rlar\u0131 ve backend ile entegrasyonun \u00f6nemi gibi ger\u00e7ek d\u00fcnya considerations&#8217;lar\u0131n\u0131 da tart\u0131\u015faca\u011f\u0131z. Amac\u0131m\u0131z, React projelerinizde sa\u011flam ve y\u00f6netilebilir bir yetkilendirme yap\u0131s\u0131 kurman\u0131z i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n<h3>Yetkilendirme ve Kimlik Do\u011frulama: Temel Farklar<\/h3>\n<p>React&#8217;te yetkilendirme mekanizmalar\u0131n\u0131 incelemeye ba\u015flamadan \u00f6nce, s\u0131k\u00e7a kar\u0131\u015ft\u0131r\u0131lan iki \u00f6nemli kavram\u0131 netle\u015ftirmek faydal\u0131 olacakt\u0131r: kimlik do\u011frulama (authentication) ve yetkilendirme (authorization).<\/p>\n<p>*   <strong>Kimlik Do\u011frulama (Authentication):<\/strong> Bir kullan\u0131c\u0131n\u0131n veya sistemin kimli\u011fini do\u011frulamak s\u00fcrecidir. &#8220;Sen kimsin?&#8221; sorusuna cevap verir. Kullan\u0131c\u0131 ad\u0131 ve \u015fifre ile giri\u015f yapmak, e-posta onay\u0131, iki fakt\u00f6rl\u00fc kimlik do\u011frulama (2FA) gibi y\u00f6ntemler kimlik do\u011frulamas\u0131na \u00f6rnektir. Ba\u015far\u0131l\u0131 bir kimlik do\u011frulama sonucunda, genellikle kullan\u0131c\u0131n\u0131n kimli\u011fini do\u011frulayan bir token (\u00f6rne\u011fin, JWT) elde edilir.<\/p>\n<p>*   <strong>Yetkilendirme (Authorization):<\/strong> Kimli\u011fi do\u011frulanm\u0131\u015f bir kullan\u0131c\u0131n\u0131n belirli bir kayna\u011fa (veri, sayfa, fonksiyon vb.) eri\u015fim veya belirli bir eylemi ger\u00e7ekle\u015ftirme iznine sahip olup olmad\u0131\u011f\u0131n\u0131 belirleme s\u00fcrecidir. &#8220;Ne yapmana izin var?&#8221; sorusuna cevap verir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n &#8220;admin&#8221; rol\u00fcne sahip olup olmad\u0131\u011f\u0131na bakarak bir &#8220;kullan\u0131c\u0131lar\u0131 y\u00f6net&#8221; sayfas\u0131na eri\u015fip eri\u015femeyece\u011fini belirlemek yetkilendirmedir.<\/p>\n<p>React uygulamalar\u0131nda, kimlik do\u011frulama genellikle bir backend servisi arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r ve elde edilen token istemci taraf\u0131nda (taray\u0131c\u0131da) saklan\u0131r. Yetkilendirme ise, bu token i\u00e7indeki veya backend&#8217;den ayr\u0131 bir istek ile al\u0131nan kullan\u0131c\u0131 rol ve izin bilgilerine dayanarak hem frontend&#8217;de (UI elementlerini gizlemek veya rotalar\u0131 korumak i\u00e7in) hem de backend&#8217;de (veri taban\u0131 i\u015flemlerini k\u0131s\u0131tlamak i\u00e7in) uygulan\u0131r. Unutulmamal\u0131d\u0131r ki, frontend yetkilendirme yaln\u0131zca kullan\u0131c\u0131 deneyimi i\u00e7indir ve ger\u00e7ek g\u00fcvenlik backend taraf\u0131ndan sa\u011flanmal\u0131d\u0131r. K\u00f6t\u00fc niyetli bir kullan\u0131c\u0131, frontend&#8217;deki yetkilendirme kontrollerini kolayca atlayabilir.<\/p>\n<h3>React&#8217;te Basit Yetkilendirme Yakla\u015f\u0131mlar\u0131<\/h3>\n<p>React uygulamalar\u0131nda yetkilendirme mant\u0131\u011f\u0131n\u0131 y\u00f6netmek i\u00e7in \u00e7e\u015fitli desenler ve k\u00fct\u00fcphaneler kullan\u0131labilir. Bu b\u00f6l\u00fcmde, basit ve yayg\u0131n olarak kullan\u0131lan d\u00f6rt ana yakla\u015f\u0131m\u0131 inceleyece\u011fiz: React Context API, Higher-Order Components (HOCs), Render Props deseni ve \u00f6zel hook&#8217;lar.<\/p>\n<h4>React Context API ile Durum Y\u00f6netimi<\/h4>\n<p>React Context API, prop drilling (prop&#8217;lar\u0131 bile\u015fen a\u011fac\u0131nda derinlere ge\u00e7irme) sorununu \u00e7\u00f6zmek ve global durumlar\u0131 (kullan\u0131c\u0131 bilgileri, tema ayarlar\u0131 gibi) t\u00fcm bile\u015fenlere kolayca ula\u015ft\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Yetkilendirme i\u00e7in kullan\u0131c\u0131 rolleri ve izinleri gibi bilgileri merkezi bir yerde tutmak i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r.<\/p>\n<p><strong>Uygulama Ad\u0131mlar\u0131:<\/strong><\/p>\n<p>1.  <strong>AuthContext Olu\u015fturma:<\/strong> Kullan\u0131c\u0131 bilgilerini (isAuthenticated, user, roles, permissions) tutacak bir context olu\u015fturulur.<br \/>\n2.  <strong>AuthProvider Bile\u015feni:<\/strong> Bu bile\u015fen, uygulaman\u0131n \u00fcst seviyelerinde yer al\u0131r ve <code>AuthContext<\/code>&#8216;in de\u011ferini (kullan\u0131c\u0131 durumu ve yetkilendirme fonksiyonlar\u0131) sa\u011flar. Genellikle kullan\u0131c\u0131n\u0131n giri\u015f durumunu y\u00f6netir ve backend&#8217;den gelen bilgileri g\u00fcnceller.<br \/>\n3.  <strong>useAuth Hook&#8217;u:<\/strong> Context&#8217;e kolayca eri\u015fim sa\u011flamak i\u00e7in \u00f6zel bir hook (<code>useContext<\/code> kullanarak) olu\u015fturulur.<\/p>\n<p><strong>Kod \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/contexts\/AuthContext.js\nimport React, { createContext, useContext, useState, useEffect } from 'react';\n\nconst AuthContext = createContext(null);\n\nexport const AuthProvider = ({ children }) => {\n  const [isAuthenticated, setIsAuthenticated] = useState(false);\n  const [user, setUser] = useState(null);\n  const [roles, setRoles] = useState([]);\n  const [permissions, setPermissions] = useState([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    \/\/ Uygulama y\u00fcklendi\u011finde veya yenilendi\u011finde kimlik do\u011frulama durumunu kontrol et\n    const token = localStorage.getItem('authToken');\n    if (token) {\n      \/\/ Token'\u0131 do\u011frula (ger\u00e7ek uygulamada backend'e istek at\u0131l\u0131r)\n      \/\/ Basitlik ad\u0131na burada sahte bir kullan\u0131c\u0131 ve rol atayal\u0131m\n      const decodedUser = { id: '123', name: 'John Doe', email: 'john@example.com' };\n      const userRoles = ['admin', 'editor'];\n      const userPermissions = ['can_view_dashboard', 'can_edit_posts', 'can_delete_posts'];\n\n      setIsAuthenticated(true);\n      setUser(decodedUser);\n      setRoles(userRoles);\n      setPermissions(userPermissions);\n    }\n    setLoading(false);\n  }, []);\n\n  const login = async (username, password) => {\n    \/\/ Ger\u00e7ek bir API \u00e7a\u011fr\u0131s\u0131 ile kimlik do\u011frulama\n    \/\/ \u00d6rne\u011fin: const response = await fetch('\/api\/login', { method: 'POST', body: JSON.stringify({ username, password }) });\n    \/\/ const data = await response.json();\n    \/\/ localStorage.setItem('authToken', data.token);\n\n    \/\/ Basitlik ad\u0131na sahte giri\u015f\n    if (username === 'admin' && password === 'password') {\n      const token = 'fake-jwt-token'; \/\/ Ger\u00e7ekte backend'den gelen token\n      localStorage.setItem('authToken', token);\n      const decodedUser = { id: '123', name: 'Admin User', email: 'admin@example.com' };\n      const userRoles = ['admin', 'user'];\n      const userPermissions = ['can_view_dashboard', 'can_edit_posts', 'can_delete_posts', 'can_manage_users'];\n\n      setIsAuthenticated(true);\n      setUser(decodedUser);\n      setRoles(userRoles);\n      setPermissions(userPermissions);\n      return true;\n    }\n    return false;\n  };\n\n  const logout = () => {\n    localStorage.removeItem('authToken');\n    setIsAuthenticated(false);\n    setUser(null);\n    setRoles([]);\n    setPermissions([]);\n  };\n\n  const hasRole = (role) => roles.includes(role);\n  const hasPermission = (permission) => permissions.includes(permission);\n\n  const value = {\n    isAuthenticated,\n    user,\n    roles,\n    permissions,\n    loading,\n    login,\n    logout,\n    hasRole,\n    hasPermission,\n  };\n\n  return <AuthContext.Provider value={value}>{children}<\/AuthContext.Provider>;\n};\n\nexport const useAuth = () => {\n  const context = useContext(AuthContext);\n  if (context === undefined) {\n    throw new Error('useAuth must be used within an AuthProvider');\n  }\n  return context;\n};<\/code><\/pre>\n<p><strong>Kullan\u0131m \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\nimport React from 'react';\nimport { AuthProvider } from '.\/contexts\/AuthContext';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\nimport HomePage from '.\/pages\/HomePage';\nimport DashboardPage from '.\/pages\/DashboardPage';\nimport AdminPage from '.\/pages\/AdminPage';\nimport LoginPage from '.\/pages\/LoginPage';\nimport ProtectedRoute from '.\/components\/ProtectedRoute'; \/\/ Birazdan olu\u015fturaca\u011f\u0131z\nimport AuthStatus from '.\/components\/AuthStatus'; \/\/ Birazdan olu\u015fturaca\u011f\u0131z\n\nfunction App() {\n  return (\n    <Router>\n      <AuthProvider>\n        <AuthStatus \/>\n        <nav>\n          <ul>\n            <li><Link to=\"\/\">Ana Sayfa<\/Link><\/li>\n            <li><Link to=\"\/dashboard\">G\u00f6sterge Paneli<\/Link><\/li>\n            <li><Link to=\"\/admin\">Y\u00f6netici Sayfas\u0131<\/Link><\/li>\n            <li><Link to=\"\/login\">Giri\u015f Yap<\/Link><\/li>\n          <\/ul>\n        <\/nav>\n        <Routes>\n          <Route path=\"\/\" element={<HomePage \/>} \/>\n          <Route path=\"\/login\" element={<LoginPage \/>} \/>\n          <Route \n            path=\"\/dashboard\" \n            element={\n              <ProtectedRoute requiredRoles={['user', 'editor', 'admin']}>\n                <DashboardPage \/>\n              <\/ProtectedRoute>\n            } \n          \/>\n          <Route \n            path=\"\/admin\" \n            element={\n              <ProtectedRoute requiredRoles={['admin']}>\n                <AdminPage \/>\n              <\/ProtectedRoute>\n            } \n          \/>\n        <\/Routes>\n      <\/AuthProvider>\n    <\/Router>\n  );\n}\n\nexport default App;<\/code><\/pre>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/AuthStatus.js\nimport React from 'react';\nimport { useAuth } from '..\/contexts\/AuthContext';\nimport { useNavigate } from 'react-router-dom';\n\nconst AuthStatus = () => {\n  const { isAuthenticated, user, logout } = useAuth();\n  const navigate = useNavigate();\n\n  if (!isAuthenticated) {\n    return <p>Giri\u015f yap\u0131lmad\u0131. <button onClick={() => navigate('\/login')}>Giri\u015f Yap<\/button><\/p>;\n  }\n\n  return (\n    <p>\n      Ho\u015f geldin, {user.name}!{' '}\n      <button onClick={() => { logout(); navigate('\/'); }}>\u00c7\u0131k\u0131\u015f Yap<\/button>\n    <\/p>\n  );\n};\n\nexport default AuthStatus;<\/code><\/pre>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n*   Global duruma kolay eri\u015fim sa\u011flar.<br \/>\n*   Prop drilling&#8217;i ortadan kald\u0131r\u0131r.<br \/>\n*   Kodun daha temiz ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar.<br \/>\n*   React&#8217;in yerel bir \u00f6zelli\u011fidir, ek k\u00fct\u00fcphane gerektirmez.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n*   \u00c7ok s\u0131k g\u00fcncellenen durumlar i\u00e7in performans sorunlar\u0131 ya\u015fatabilir (ancak yetkilendirme durumu genellikle s\u0131k de\u011fi\u015fmez).<br \/>\n*   Context&#8217;in kapsam\u0131 geni\u015f oldu\u011funda, hangi bile\u015fenlerin hangi context&#8217;i kulland\u0131\u011f\u0131n\u0131 takip etmek zorla\u015fabilir.<\/p>\n<h4>Y\u00fcksek Dereceli Bile\u015fenler (Higher-Order Components &#8211; HOCs)<\/h4>\n<p>HOC&#8217;ler, bir bile\u015feni arg\u00fcman olarak alan ve yeni bir bile\u015fen d\u00f6nd\u00fcren fonksiyonlard\u0131r. React&#8217;te kod tekrar\u0131n\u0131 azaltmak, yan etkileri y\u00f6netmek ve \u00e7apraz kesen konular\u0131 (cross-cutting concerns) ele almak i\u00e7in g\u00fc\u00e7l\u00fc bir desendir. Yetkilendirme mant\u0131\u011f\u0131n\u0131 bir HOC i\u00e7ine sararak, birden fazla bile\u015fene ayn\u0131 yetkilendirme kontrol\u00fcn\u00fc ekleyebiliriz.<\/p>\n<p><strong>Kod \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/withAuthorization.js\nimport React from 'react';\nimport { useAuth } from '..\/contexts\/AuthContext';\nimport { Navigate } from 'react-router-dom';\n\nconst withAuthorization = (WrappedComponent, requiredRoles = [], redirectPath = '\/login') => {\n  return function WithAuthorization(props) {\n    const { isAuthenticated, hasRole, loading } = useAuth();\n\n    if (loading) {\n      return <div>Y\u00fckleniyor...<\/div>; \/\/ Y\u00fckleme durumunu y\u00f6net\n    }\n\n    if (!isAuthenticated) {\n      return <Navigate to={redirectPath} replace \/>;\n    }\n\n    if (requiredRoles.length > 0 && !requiredRoles.some(role => hasRole(role))) {\n      \/\/ Kullan\u0131c\u0131n\u0131n gerekli rollerden hi\u00e7birine sahip olmamas\u0131 durumu\n      \/\/ \u00d6rne\u011fin, yetkisiz kullan\u0131c\u0131lar i\u00e7in 403 sayfas\u0131na y\u00f6nlendirme\n      return <Navigate to=\"\/unauthorized\" replace \/>; \/\/ Yeni bir yetkisiz sayfa olu\u015fturulabilir\n    }\n\n    return <WrappedComponent {...props} \/>;\n  };\n};\n\nexport default withAuthorization;<\/code><\/pre>\n<p><strong>Kullan\u0131m \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/pages\/DashboardPage.js\nimport React from 'react';\nimport withAuthorization from '..\/components\/withAuthorization';\nimport { useAuth } from '..\/contexts\/AuthContext'; \/\/ UI elementleri i\u00e7in\n\nconst DashboardPage = () => {\n  const { user, hasPermission } = useAuth();\n\n  return (\n    <div>\n      <h2>G\u00f6sterge Paneli<\/h2>\n      <p>Ho\u015f geldin, {user?.name}!<\/p>\n      {hasPermission('can_view_dashboard') && <p>\u00d6zel g\u00f6sterge paneli verileri burada.<\/p>}\n      {hasPermission('can_edit_posts') && <button>Yeni G\u00f6nderi Olu\u015ftur<\/button>}\n    <\/div>\n  );\n};\n\nexport default withAuthorization(DashboardPage, ['user', 'editor', 'admin']);<\/code><\/pre>\n<pre><code class=\"language-jsx\">\/\/ src\/pages\/AdminPage.js\nimport React from 'react';\nimport withAuthorization from '..\/components\/withAuthorization';\nimport { useAuth } from '..\/contexts\/AuthContext';\n\nconst AdminPage = () => {\n  const { hasPermission } = useAuth();\n\n  return (\n    <div>\n      <h2>Y\u00f6netici Sayfas\u0131<\/h2>\n      <p>Bu sayfa sadece y\u00f6neticiler i\u00e7indir.<\/p>\n      {hasPermission('can_manage_users') && <button>Kullan\u0131c\u0131lar\u0131 Y\u00f6net<\/button>}\n      {hasPermission('can_delete_posts') && <button>T\u00fcm G\u00f6nderileri Sil<\/button>}\n    <\/div>\n  );\n};\n\nexport default withAuthorization(AdminPage, ['admin']);<\/code><\/pre>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n*   Yetkilendirme mant\u0131\u011f\u0131n\u0131 bile\u015fenlerden ay\u0131rarak kod tekrar\u0131n\u0131 azalt\u0131r.<br \/>\n*   Bile\u015fenlerin temiz kalmas\u0131n\u0131 sa\u011flar.<br \/>\n*   Mevcut bile\u015fenlere kolayca yetkilendirme eklenmesini sa\u011flar.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n*   HOC&#8217;ler, bile\u015fen a\u011fac\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131rabilir (&#8220;wrapper hell&#8221;).<br \/>\n*   Prop isim \u00e7ak\u0131\u015fmalar\u0131 ya\u015fanabilir.<br \/>\n*   Debugging (hata ay\u0131klama) zorla\u015fabilir, \u00e7\u00fcnk\u00fc bile\u015fen hiyerar\u015fisi de\u011fi\u015fir.<\/p>\n<h4>Render Props Deseni<\/h4>\n<p>Render Props, bir bile\u015fenin ne render edece\u011fini prop olarak bir fonksiyona devretti\u011fi bir tekniktir. Bu desen, yetkilendirme mant\u0131\u011f\u0131n\u0131 bir bile\u015fende kaps\u00fclleyip, yetkilendirme durumuna g\u00f6re farkl\u0131 UI&#8217;lar render etme esnekli\u011fi sunar.<\/p>\n<p><strong>Kod \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/AuthChecker.js\nimport React from 'react';\nimport { useAuth } from '..\/contexts\/AuthContext';\nimport { Navigate } from 'react-router-dom';\n\nconst AuthChecker = ({ requiredRoles = [], requiredPermissions = [], redirectPath = '\/login', children }) => {\n  const { isAuthenticated, hasRole, hasPermission, loading } = useAuth();\n\n  if (loading) {\n    return <div>Y\u00fckleniyor...<\/div>;\n  }\n\n  if (!isAuthenticated) {\n    return <Navigate to={redirectPath} replace \/>;\n  }\n\n  const userHasRequiredRole = requiredRoles.length === 0 || requiredRoles.some(role => hasRole(role));\n  const userHasRequiredPermission = requiredPermissions.length === 0 || requiredPermissions.some(perm => hasPermission(perm));\n\n  if (!userHasRequiredRole || !userHasRequiredPermission) {\n    return <Navigate to=\"\/unauthorized\" replace \/>;\n  }\n\n  \/\/ Render props \u00e7ocuk fonksiyonunu \u00e7a\u011f\u0131r\u0131r ve yetkilendirme durumunu iletebilir\n  return typeof children === 'function' ? children({ isAuthenticated, hasRole, hasPermission }) : children;\n};\n\nexport default AuthChecker;<\/code><\/pre>\n<p><strong>Kullan\u0131m \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/pages\/SomeAuthorizedPage.js\nimport React from 'react';\nimport AuthChecker from '..\/components\/AuthChecker';\n\nconst SomeAuthorizedPage = () => {\n  return (\n    <AuthChecker requiredRoles={['editor', 'admin']} requiredPermissions={['can_edit_posts']}>\n      {({ isAuthenticated, hasRole, hasPermission }) => (\n        <div>\n          <h2>Yetkili \u0130\u00e7erik Sayfas\u0131<\/h2>\n          <p>Bu i\u00e7eri\u011fi sadece edit\u00f6rler veya y\u00f6neticiler g\u00f6rebilir ve d\u00fczenleyebilir.<\/p>\n          {hasPermission('can_edit_posts') && <button>Bu G\u00f6nderiyi D\u00fczenle<\/button>}\n          {hasRole('admin') && <button>Bu G\u00f6nderiyi Sil (Admin)<\/button>}\n        <\/div>\n      )}\n    <\/AuthChecker>\n  );\n};\n\nexport default SomeAuthorizedPage;<\/code><\/pre>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n*   HOC&#8217;lere g\u00f6re daha esnek bir bile\u015fim sa\u011flar.<br \/>\n*   Prop \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nler.<br \/>\n*   Yetkilendirme durumunu \u00e7ocuk bile\u015fene a\u00e7\u0131k\u00e7a iletir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n*   \u0130\u00e7 i\u00e7e ge\u00e7mi\u015f render prop&#8217;lar &#8220;callback hell&#8221; benzeri bir yap\u0131ya yol a\u00e7abilir.<br \/>\n*   Kodun okunabilirli\u011fi, \u00f6zellikle karma\u015f\u0131k durumlarda, HOC&#8217;lere g\u00f6re biraz daha zor olabilir.<\/p>\n<h4>\u00d6zel Hook&#8217;lar (Custom Hooks)<\/h4>\n<p>React Hooks ile birlikte gelen \u00f6zel hook&#8217;lar, bile\u015fenler aras\u0131nda durum bilgisi olan mant\u0131\u011f\u0131 yeniden kullanmak i\u00e7in g\u00fc\u00e7l\u00fc bir yol sunar. Yetkilendirme mant\u0131\u011f\u0131n\u0131 \u00f6zel hook&#8217;lar i\u00e7ine kaps\u00fclleyerek, bu mant\u0131\u011f\u0131 herhangi bir fonksiyonel bile\u015fende kolayca kullanabiliriz. Genellikle <code>useContext<\/code> ile birlikte kullan\u0131larak <code>AuthContext<\/code>&#8216;ten gelen bilgilere eri\u015fim sa\u011flan\u0131r.<\/p>\n<p><strong>Kod \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/hooks\/useAuthorization.js\nimport { useAuth } from '..\/contexts\/AuthContext';\n\nexport const useHasRole = (role) => {\n  const { hasRole, loading } = useAuth();\n  return loading ? false : hasRole(role);\n};\n\nexport const useHasPermission = (permission) => {\n  const { hasPermission, loading } = useAuth();\n  return loading ? false : hasPermission(permission);\n};\n\nexport const useIsAuthenticated = () => {\n  const { isAuthenticated, loading } = useAuth();\n  return loading ? false : isAuthenticated;\n};<\/code><\/pre>\n<p><strong>Kullan\u0131m \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/pages\/SettingsPage.js\nimport React from 'react';\nimport { useHasRole, useHasPermission, useIsAuthenticated } from '..\/hooks\/useAuthorization';\nimport { useAuth } from '..\/contexts\/AuthContext'; \/\/ Kullan\u0131c\u0131 bilgileri i\u00e7in\n\nconst SettingsPage = () => {\n  const isAdmin = useHasRole('admin');\n  const canEditSettings = useHasPermission('can_edit_settings');\n  const isAuthenticated = useIsAuthenticated();\n  const { user } = useAuth();\n\n  if (!isAuthenticated) {\n    return <p>L\u00fctfen giri\u015f yap\u0131n.<\/p>;\n  }\n\n  return (\n    <div>\n      <h2>Ayarlar<\/h2>\n      <p>Kullan\u0131c\u0131: {user?.name}<\/p>\n\n      {canEditSettings && (\n        <div>\n          <h3>Genel Ayarlar<\/h3>\n          <p>Uygulama genel ayarlar\u0131n\u0131 d\u00fczenleyebilirsiniz.<\/p>\n          <button>Ayarlar\u0131 Kaydet<\/button>\n        <\/div>\n      )}\n\n      {isAdmin && (\n        <div>\n          <h3>Y\u00f6netici Ayarlar\u0131<\/h3>\n          <p>Kritik sistem ayarlar\u0131n\u0131 d\u00fczenleyebilirsiniz.<\/p>\n          <button>Sistem Ayarlar\u0131n\u0131 G\u00fcncelle<\/button>\n        <\/div>\n      )}\n\n      {!canEditSettings && !isAdmin && (\n        <p>Ayarlar\u0131 g\u00f6r\u00fcnt\u00fcleme veya d\u00fczenleme yetkiniz bulunmamaktad\u0131r.<\/p>\n      )}\n    <\/div>\n  );\n};\n\nexport default SettingsPage;<\/code><\/pre>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n*   Yetkilendirme mant\u0131\u011f\u0131n\u0131 tamamen ayr\u0131\u015ft\u0131r\u0131r ve yeniden kullan\u0131labilir hale getirir.<br \/>\n*   Bile\u015fenlerin okunabilirli\u011fini art\u0131r\u0131r.<br \/>\n*   Modern React geli\u015ftirme i\u00e7in \u00f6nerilen yakla\u015f\u0131md\u0131r.<br \/>\n*   HOC&#8217;ler ve Render Props&#8217;un baz\u0131 dezavantajlar\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n*   \u00c7ok fazla \u00f6zel hook olu\u015fturulmas\u0131, projenin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131rabilir.<\/p>\n<h3>Rota Koruma (Route Protection)<\/h3>\n<p>React uygulamalar\u0131nda yetkilendirme, sadece UI elementlerini gizlemekle kalmaz, ayn\u0131 zamanda belirli rotalara (sayfalara) eri\u015fimi de k\u0131s\u0131tlar. <code>react-router-dom<\/code> ile bu i\u015flem, bir <code>ProtectedRoute<\/code> bile\u015feni olu\u015fturularak kolayca yap\u0131labilir.<\/p>\n<p><strong>Kod \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/ProtectedRoute.js\nimport React from 'react';\nimport { useAuth } from '..\/contexts\/AuthContext';\nimport { Navigate } from 'react-router-dom';\n\nconst ProtectedRoute = ({ children, requiredRoles = [], redirectPath = '\/login' }) => {\n  const { isAuthenticated, hasRole, loading } = useAuth();\n\n  if (loading) {\n    return <div>Y\u00fckleniyor...<\/div>; \/\/ Y\u00fckleme durumunu y\u00f6net\n  }\n\n  if (!isAuthenticated) {\n    \/\/ Kullan\u0131c\u0131 giri\u015f yapmam\u0131\u015fsa login sayfas\u0131na y\u00f6nlendir\n    return <Navigate to={redirectPath} replace \/>;\n  }\n\n  if (requiredRoles.length > 0) {\n    \/\/ Kullan\u0131c\u0131n\u0131n gerekli rollerden en az birine sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n    const userHasRequiredRole = requiredRoles.some(role => hasRole(role));\n    if (!userHasRequiredRole) {\n      \/\/ Kullan\u0131c\u0131n\u0131n gerekli rol\u00fc yoksa yetkisiz sayfas\u0131na y\u00f6nlendir\n      return <Navigate to=\"\/unauthorized\" replace \/>; \/\/ '\/unauthorized' sayfas\u0131n\u0131 olu\u015fturmal\u0131s\u0131n\u0131z\n    }\n  }\n\n  return children;\n};\n\nexport default ProtectedRoute;<\/code><\/pre>\n<p>Bu <code>ProtectedRoute<\/code> bile\u015feni, <code>App.js<\/code> i\u00e7indeki rota tan\u0131mlamalar\u0131nda kullan\u0131ld\u0131 (bkz. Context API kullan\u0131m \u00f6rne\u011fi). Bu sayede, belirli bir sayfaya eri\u015fim i\u00e7in kullan\u0131c\u0131n\u0131n kimlik do\u011frulamas\u0131n\u0131n yap\u0131lm\u0131\u015f olmas\u0131 ve belirli rollere sahip olmas\u0131 zorunlu hale getirilir.<\/p>\n<h3>Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Elementlerinin Yetkilendirilmesi<\/h3>\n<p>Yetkilendirme, bir kullan\u0131c\u0131n\u0131n belirli bir sayfaya eri\u015fip eri\u015femeyece\u011fini belirlemenin yan\u0131 s\u0131ra, o sayfadaki belirli d\u00fc\u011fmeleri, form alanlar\u0131n\u0131 veya i\u00e7erik bloklar\u0131n\u0131 g\u00f6r\u00fcnt\u00fcleyip g\u00f6r\u00fcnt\u00fcleyemeyece\u011fini de kontrol eder. Bu, React&#8217;te ko\u015fullu renderlama (conditional rendering) ile kolayca ger\u00e7ekle\u015ftirilir.<\/p>\n<p><strong>Kod \u00d6rne\u011fi:<\/strong><\/p>\n<p><code>useAuth<\/code> hook&#8217;unu veya \u00f6zel yetkilendirme hook&#8217;lar\u0131n\u0131 kullanarak bir bile\u015fen i\u00e7indeki UI elementlerini yetkilendirebiliriz.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/components\/PostCard.js\nimport React from 'react';\nimport { useAuth } from '..\/contexts\/AuthContext';\nimport { useHasPermission, useHasRole } from '..\/hooks\/useAuthorization';\n\nconst PostCard = ({ post }) => {\n  const { user } = useAuth();\n  const canEdit = useHasPermission('can_edit_posts');\n  const canDelete = useHasPermission('can_delete_posts');\n  const isAdmin = useHasRole('admin');\n\n  \/\/ G\u00f6nderiyi sadece kendi yazar\u0131 d\u00fczenleyebilir veya bir y\u00f6netici\n  const isAuthor = user?.id === post.authorId;\n\n  return (\n    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px 0' }}>\n      <h3>{post.title}<\/h3>\n      <p>{post.content}<\/p>\n      <p>Yazar: {post.authorName}<\/p>\n\n      {(canEdit && isAuthor) && (\n        <button style={{ marginRight: '10px' }}>D\u00fczenle<\/button>\n      )}\n\n      {(canDelete || isAdmin) && ( \/\/ Edit\u00f6rler veya y\u00f6neticiler silebilir\n        <button style={{ backgroundColor: 'red', color: 'white' }}>Sil<\/button>\n      )}\n\n      {!canEdit && !canDelete && !isAdmin && (\n        <p>Bu g\u00f6nderi \u00fczerinde herhangi bir yetkiniz bulunmamaktad\u0131r.<\/p>\n      )}\n    <\/div>\n  );\n};\n\nexport default PostCard;<\/code><\/pre>\n<p>Bu \u00f6rnekte, bir <code>PostCard<\/code> bile\u015feni, kullan\u0131c\u0131n\u0131n rol ve izinlerine g\u00f6re &#8220;D\u00fczenle&#8221; ve &#8220;Sil&#8221; d\u00fc\u011fmelerini ko\u015fullu olarak g\u00f6sterir. <code>canEdit<\/code> iznine sahip olan ve g\u00f6nderinin yazar\u0131 olan bir kullan\u0131c\u0131 &#8220;D\u00fczenle&#8221; d\u00fc\u011fmesini g\u00f6r\u00fcrken, <code>canDelete<\/code> iznine sahip olan veya &#8220;admin&#8221; rol\u00fcndeki bir kullan\u0131c\u0131 &#8220;Sil&#8221; d\u00fc\u011fmesini g\u00f6rebilir. Bu yakla\u015f\u0131m, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc dinamik ve yetkilendirmeye duyarl\u0131 hale getirir.<\/p>\n<h3>G\u00fcvenlik, Performans ve \u00d6l\u00e7eklenebilirlik \u0130\u00e7in Dikkat Edilmesi Gerekenler<\/h3>\n<p>React uygulamalar\u0131nda basit yetkilendirme y\u00f6ntemlerini uygularken, baz\u0131 \u00f6nemli noktalar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak, uygulaman\u0131z\u0131n g\u00fcvenli\u011fini, performans\u0131n\u0131 ve uzun vadeli s\u00fcrd\u00fcr\u00fclebilirli\u011fini sa\u011flamak a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n<h4>Frontend Yetkilendirme Bir G\u00fcvenlik S\u0131n\u0131r\u0131 De\u011fildir<\/h4>\n<p>Bu, en \u00f6nemli ve s\u0131k\u00e7a g\u00f6z ard\u0131 edilen noktad\u0131r. Frontend&#8217;de uygulanan t\u00fcm yetkilendirme kontrolleri (UI elementlerini gizlemek, rotalar\u0131 korumak vb.) yaln\u0131zca kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve yetkisiz kullan\u0131c\u0131lara gereksiz se\u00e7enekleri g\u00f6stermemek i\u00e7indir. K\u00f6t\u00fc niyetli bir kullan\u0131c\u0131, taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 kullanarak JavaScript&#8217;i devre d\u0131\u015f\u0131 b\u0131rakabilir, DOM&#8217;u de\u011fi\u015ftirebilir veya do\u011frudan API istekleri g\u00f6nderebilir. Bu nedenle:<\/p>\n<p>*   <strong>Backend Her Zaman Do\u011frulamal\u0131d\u0131r:<\/strong> Herhangi bir hassas i\u015flem (veri olu\u015fturma, g\u00fcncelleme, silme) veya hassas veri iste\u011fi i\u00e7in backend, kullan\u0131c\u0131n\u0131n yetkisini her zaman yeniden do\u011frulamal\u0131d\u0131r. Frontend&#8217;den gelen isteklere asla g\u00fcvenilmemelidir.<br \/>\n*   <strong>Hassas Verileri G\u00f6ndermeyin:<\/strong> Yetkisiz bir kullan\u0131c\u0131n\u0131n g\u00f6rmemesi gereken verileri frontend&#8217;e (\u00f6rne\u011fin, ilk y\u00fcklemede HTML\/JS i\u00e7inde) asla g\u00f6ndermeyin. Backend, yaln\u0131zca yetkili kullan\u0131c\u0131lar\u0131n eri\u015febilece\u011fi verileri d\u00f6nd\u00fcrmelidir.<br \/>\n*   <strong>Token Tabanl\u0131 Kimlik Do\u011frulama (JWT):<\/strong> Genellikle, kimlik do\u011frulama s\u0131ras\u0131nda elde edilen JSON Web Token (JWT), kullan\u0131c\u0131n\u0131n rolleri veya izinleri gibi yetkilendirme bilgilerini i\u00e7erebilir. Backend, her istekte bu token&#8217;\u0131 do\u011frulayarak ve i\u00e7indeki yetkilendirme bilgilerini kontrol ederek g\u00fcvenli\u011fi sa\u011flar.<\/p>\n<h4>Performans Optimizasyonu<\/h4>\n<p>Yetkilendirme kontrollerini uygularken performans\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir:<\/p>\n<p>*   <strong>Gereksiz Yere Tekrar Hesaplama Yapmay\u0131n:<\/strong> <code>useMemo<\/code> veya <code>useCallback<\/code> gibi React hook&#8217;lar\u0131n\u0131 kullanarak yetkilendirme durumlar\u0131n\u0131 veya fonksiyonlar\u0131n\u0131 gereksiz yere tekrar hesaplamaktan ka\u00e7\u0131n\u0131n. <code>AuthContext<\/code> i\u00e7indeki <code>hasRole<\/code> ve <code>hasPermission<\/code> gibi fonksiyonlar genellikle stabil kal\u0131r.<br \/>\n*   <strong>Y\u00fckleme Durumunu Y\u00f6netin:<\/strong> Kullan\u0131c\u0131n\u0131n yetkilendirme bilgileri backend&#8217;den asenkron olarak y\u00fcklenirken, kullan\u0131c\u0131ya bir y\u00fckleme g\u00f6stergesi sunmak veya ge\u00e7ici bir UI g\u00f6stermek iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar. Bu, yetkilendirme kontrollerinin yanl\u0131\u015fl\u0131kla ba\u015far\u0131s\u0131z olmas\u0131n\u0131 \u00f6nler.<br \/>\n*   <strong>\u0130zinleri Minimumda Tutun:<\/strong> Frontend&#8217;e sadece o anda ger\u00e7ekten ihtiya\u00e7 duyulan izin bilgilerini getirin. \u00c7ok say\u0131da izin bilgisini y\u00f6netmek, uygulaman\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini art\u0131rabilir ve bellek kullan\u0131m\u0131n\u0131 y\u00fckseltebilir.<\/p>\n<h4>\u00d6l\u00e7eklenebilirlik ve Bak\u0131m<\/h4>\n<p>Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, yetkilendirme mant\u0131\u011f\u0131 da karma\u015f\u0131kla\u015fabilir:<\/p>\n<p>*   <strong>Merkezi Yetkilendirme Servisi:<\/strong> Karma\u015f\u0131k uygulamalar i\u00e7in, t\u00fcm yetkilendirme mant\u0131\u011f\u0131n\u0131 y\u00f6neten merkezi bir yetkilendirme servisi (backend&#8217;de) kullanmak, frontend&#8217;deki mant\u0131\u011f\u0131 basitle\u015ftirebilir. Frontend sadece bu servisten ald\u0131\u011f\u0131 kararlar\u0131 uygular.<br \/>\n*   <strong>Rol Tabanl\u0131 Eri\u015fim Kontrol\u00fc (RBAC) ve Nitelik Tabanl\u0131 Eri\u015fim Kontrol\u00fc (ABAC):<\/strong> Basit uygulamalar i\u00e7in rol tabanl\u0131 yetkilendirme yeterli olabilirken, daha karma\u015f\u0131k senaryolar (\u00f6rne\u011fin, &#8220;yaln\u0131zca kendi olu\u015fturdu\u011fu g\u00f6nderileri d\u00fczenleyebilir&#8221;) i\u00e7in nitelik tabanl\u0131 eri\u015fim kontrol\u00fc gibi daha geli\u015fmi\u015f modeller d\u00fc\u015f\u00fcn\u00fclebilir.<br \/>\n*   <strong>K\u00fct\u00fcphaneler Kullan\u0131m\u0131:<\/strong> E\u011fer uygulaman\u0131z\u0131n yetkilendirme gereksinimleri \u00e7ok karma\u015f\u0131k hale gelirse, <code>casl<\/code>, <code>react-gate<\/code> gibi \u00f6zel yetkilendirme k\u00fct\u00fcphanelerini de\u011ferlendirebilirsiniz. Bu k\u00fct\u00fcphaneler, izin tan\u0131mlamalar\u0131n\u0131 ve kontrollerini daha yap\u0131land\u0131r\u0131lm\u0131\u015f bir \u015fekilde y\u00f6netmenize yard\u0131mc\u0131 olabilir.<br \/>\n*   <strong>Kod Organizasyonu:<\/strong> Yetkilendirme ile ilgili t\u00fcm hook&#8217;lar\u0131, context&#8217;leri ve bile\u015fenleri belirli bir dizin yap\u0131s\u0131 alt\u0131nda (\u00f6rne\u011fin, <code>src\/auth<\/code>, <code>src\/contexts<\/code>, <code>src\/hooks<\/code>) d\u00fczenli tutmak, bak\u0131m kolayl\u0131\u011f\u0131 sa\u011flar.<\/p>\n<h4>Kullan\u0131c\u0131 Deneyimi<\/h4>\n<p>Yetkilendirme, kullan\u0131c\u0131 deneyimini do\u011frudan etkiler:<\/p>\n<p>*   <strong>A\u00e7\u0131k Geri Bildirim:<\/strong> Bir kullan\u0131c\u0131 yetkisiz bir eylem yapmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131nda veya yetkisiz bir sayfaya eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, ona neden eri\u015femedi\u011fini a\u00e7\u0131klayan a\u00e7\u0131k ve anla\u015f\u0131l\u0131r bir mesaj veya y\u00f6nlendirme sa\u011flay\u0131n.<br \/>\n*   <strong>Graceful Degradation:<\/strong> Yetkisiz kullan\u0131c\u0131lar i\u00e7in uygulaman\u0131n tamamen \u00e7\u00f6kmesi yerine, sadece belirli \u00f6zellikleri devre d\u0131\u015f\u0131 b\u0131rakarak veya gizleyerek daha iyi bir deneyim sunun.<br \/>\n*   <strong>Yetkisiz Sayfas\u0131:<\/strong> Kullan\u0131c\u0131n\u0131n yetkisiz oldu\u011fu durumlarda y\u00f6nlendirilece\u011fi \u00f6zel bir <code>\/unauthorized<\/code> veya <code>\/403<\/code> sayfas\u0131 olu\u015fturmak, kullan\u0131c\u0131ya net bir geri bildirim sunar.<\/p>\n<p>Bu dikkat edilmesi gereken noktalar, React uygulamalar\u0131n\u0131zda uygulad\u0131\u011f\u0131n\u0131z basit yetkilendirme mekanizmalar\u0131n\u0131n sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda g\u00fcvenli, performansl\u0131 ve \u00f6l\u00e7eklenebilir olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>React uygulamalar\u0131nda basit yetkilendirme, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve uygulaman\u0131n i\u015flevselli\u011fini farkl\u0131 kullan\u0131c\u0131 rolleri aras\u0131nda b\u00f6lmek i\u00e7in vazge\u00e7ilmez bir unsurdur. Bu makalede, React Context API, Higher-Order Components (HOCs), Render Props deseni ve \u00f6zel hook&#8217;lar gibi \u00e7e\u015fitli modern React yakla\u015f\u0131mlar\u0131n\u0131 kullanarak yetkilendirme mant\u0131\u011f\u0131n\u0131 nas\u0131l uygulayabilece\u011fimizi detayl\u0131ca inceledik. Ayr\u0131ca, bu yakla\u015f\u0131mlar\u0131n rota korumas\u0131 ve kullan\u0131c\u0131 aray\u00fcz\u00fc elementlerinin ko\u015fullu olarak render edilmesi gibi pratik senaryolarda nas\u0131l kullan\u0131labilece\u011fini g\u00f6sterdik.<\/p>\n<p>\u00d6\u011frendiklerimizi \u00f6zetleyecek olursak:<\/p>\n<p>*   <strong>Context API:<\/strong> Global yetkilendirme durumunu y\u00f6netmek ve prop drilling&#8217;i \u00f6nlemek i\u00e7in g\u00fc\u00e7l\u00fc bir merkezi \u00e7\u00f6z\u00fcm sunar.<br \/>\n*   <strong>HOC&#8217;ler:<\/strong> Yetkilendirme mant\u0131\u011f\u0131n\u0131 bile\u015fenlere enjekte etmek ve kod tekrar\u0131n\u0131 azaltmak i\u00e7in kullan\u0131labilir, ancak bile\u015fen a\u011fac\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131rabilir.<br \/>\n*   <strong>Render Props:<\/strong> Yetkilendirme mant\u0131\u011f\u0131n\u0131 kaps\u00fclleyip, \u00e7ocuk bile\u015fenlere yetkilendirme durumunu esnek bir \u015fekilde iletmek i\u00e7in alternatif bir yol sa\u011flar.<br \/>\n*   <strong>\u00d6zel Hook&#8217;lar:<\/strong> Modern React geli\u015ftirmenin kalbinde yer al\u0131r; yetkilendirme mant\u0131\u011f\u0131n\u0131 yeniden kullan\u0131labilir, temiz ve anla\u015f\u0131l\u0131r bir \u015fekilde soyutlamak i\u00e7in idealdir.<\/p>\n<p>Ancak, t\u00fcm bu frontend yetkilendirme y\u00f6ntemlerinin temel bir ger\u00e7e\u011fi vard\u0131r: <strong>hi\u00e7bir frontend yetkilendirmesi, uygulaman\u0131n g\u00fcvenli\u011fini tek ba\u015f\u0131na garanti etmez.<\/strong> Frontend kontrolleri yaln\u0131zca kullan\u0131c\u0131 deneyimini \u015fekillendirir ve yetkisiz kullan\u0131c\u0131lara gereksiz se\u00e7enekleri g\u00f6stermez. Ger\u00e7ek g\u00fcvenlik her zaman backend taraf\u0131ndan sa\u011flanmal\u0131, her API iste\u011fi i\u00e7in kullan\u0131c\u0131n\u0131n kimli\u011fi ve yetkisi titizlikle do\u011frulanmal\u0131d\u0131r. Hassas veriler asla yetkisiz istemcilere g\u00f6nderilmemeli, frontend&#8217;de gizlense bile.<\/p>\n<p>Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e ve yetkilendirme gereksinimleriniz karma\u015f\u0131kla\u015ft\u0131k\u00e7a, Rol Tabanl\u0131 Eri\u015fim Kontrol\u00fc (RBAC) veya Nitelik Tabanl\u0131 Eri\u015fim Kontrol\u00fc (ABAC) gibi daha geli\u015fmi\u015f modelleri ve <code>casl<\/code> gibi \u00f6zel yetkilendirme k\u00fct\u00fcphanelerini de\u011ferlendirmek faydal\u0131 olabilir.<\/p>\n<p>Sonu\u00e7 olarak, React&#8217;te basit yetkilendirme uygulamak, uygulaman\u0131z\u0131n daha d\u00fczenli, y\u00f6netilebilir ve kullan\u0131c\u0131 dostu olmas\u0131n\u0131 sa\u011flar. Do\u011fru ara\u00e7lar\u0131 ve yakla\u015f\u0131mlar\u0131 se\u00e7erek, hem geli\u015ftirici verimlili\u011fini art\u0131rabilir hem de son kullan\u0131c\u0131lara g\u00fcvenli ve ki\u015fiselle\u015ftirilmi\u015f bir deneyim sunabilirsiniz. Ancak her zaman, frontend yetkilendirmenin bir g\u00fcvenlik duvar\u0131 de\u011fil, bir kullan\u0131c\u0131 deneyimi arac\u0131 oldu\u011funu akl\u0131n\u0131zda tutun.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri\nGiri\u015f\nModern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n farkl\u0131 seviyelerde eri\u015fim yetkilerine sa","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-31332","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri\" \/>\n<meta property=\"og:description\" content=\"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri Giri\u015f Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n farkl\u0131 seviyelerde eri\u015fim yetkilerine sa\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-08T16:41:24+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri\",\"datePublished\":\"2025-10-08T16:41:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/\"},\"wordCount\":2578,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/\",\"name\":\"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-08T16:41:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri","og_description":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri Giri\u015f Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131n farkl\u0131 seviyelerde eri\u015fim yetkilerine sa","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-08T16:41:24+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"18 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri","datePublished":"2025-10-08T16:41:24+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/"},"wordCount":2578,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/","name":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-08T16:41:24+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalarinda-basit-yetkilendirme-yontemleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulamalar\u0131nda Basit Yetkilendirme Y\u00f6ntemleri"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31332"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31332\/revisions"}],"predecessor-version":[{"id":31333,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31332\/revisions\/31333"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}