React Router ile Auth Routing Yapısı

Adı : React Router ile Auth Routing Yapısı

React Router ile Auth Routing Yapısı Nedir?

React Router, React uygulamalarında kullanılan bir routing kütüphanesidir. Auth routing yapısı ise, site kullanıcısının oturum açmış veya oturum açmamış olmasına göre sayfalara erişim sağlanmasıdır. Bu yazıda, React Router kullanarak auth routing yapısını nasıl oluşturabileceğinizi öğreneceksiniz.

Auth Routing Yapısı Nasıl Çalışır?

Auth routing yapısı kullanıcıların oturum açmış veya oturum açmamış olmasına göre sayfalara erişim sağlar. Kullanıcı oturum açmışsa, uygulama tarafından oluşturulan token kullanılarak erişim sağlanır. Eğer kullanıcı oturum açmamışsa, login sayfasına yönlendirilir. Bu yapının çalışması için, uygulama tarafında bir auth state tutulması gerekir. Bu state, kullanıcının oturum açıp açmadığını belirler.

React Router ile Auth Routing Yapısı Nasıl Oluşturulur?

React Router ile auth routing yapısı oluşturmak oldukça basittir. İlk olarak, Router component’ini App componentinin içerisinde kullanarak başlayabilirsiniz. Ardından, kullanıcının giriş yapmış olup olmadığını kontrol edeceğiniz bir auth state oluşturmanız gerekmektedir.

Öncelikle, uygulamaya Route component’leri ekleyerek yol yönlendirmeleri tanımlayın. Auth routing’te, kullanıcı oturum açmışsa ve token geçerliyse sayfaya erişim sağlanır. Aksi halde, kullanıcı login sayfasına yönlendirilir.

```

```

Erişimi kısıtlı sayfaların yer aldığı bölgelerde PrivateRoute adında bir component kullanılır. Bu component kullanıcının token’ına göre sayfaya erişim izni verir. Eğer kullanıcının token’ı geçerli değilse, Login sayfasına yönlendirilir.

```
const PrivateRoute = ({ component: Component, ...rest }) => (
(
isLoggedIn()
?
:
)} />
)
```

isLoggedIn() fonksiyonu, kullanıcının token’ının geçerli olup olmadığını kontrol eder. Eğer kullanıcının token’ı geçerli ise true değerini döndürür, aksi halde false döndürür.

Bu şekilde react router ile Auth Routing Yapısı oluşturabilirsiniz.

Auth Routing Yapısı Örnekleri

1. Public Route

```
import { Route } from 'react-router-dom';

function PublicRoute({ component: Component, ...rest }) {
return (
(

)}/>
)
}
```

2. Private Route

```
import { Redirect, Route } from 'react-router-dom';

function PrivateRoute({ component: Component, ...rest }) {
return (
(
isLoggedIn()
?
:
)}/>
)
}
```

3. Logout

```
function handleLogout() {
// clear token from storage
localStorage.removeItem('token');
// remove user from store
dispatch(removeCurrentUser());
// redirect to login
history.push('/login');
}
```

Sık Sorulan Sorular

1. Rota bazlı auth yapısı neden önemlidir?

Rota bazlı auth yapıları, uygulamalarda kullanıcının güvenliği açısından önemlidir. Erişimi kısıtlı alanlara yalnızca oturum açmış kullanıcılar erişebildiği için, uygulamalarda güvenlik sağlanmaktadır.

2. Auth routing yapısı olmadan uygulama güvenliğini nasıl sağlayabilirim?

Auth routing yapısı olmadan, uygulamanızı güvenli hale getirmeniz oldukça zordur. Ancak, kullanıcının token’ı geçerli olmadığında redirect işlemleri yaparak doğrudan girişi engelleyebilirsiniz. Ancak, bu yöntem çok kapsamlı ve kullanışlı bir yöntem değildir. Doğrudan token’ın geçerli olup olmadığını kontrol etmek daha etkili bir çözümdür.

3. Token’ın geçerliliği nasıl kontrol edilir?

Token’ın geçerliliği, genellikle backend tarafında kontrol edilir. Backend, kullanıcının token’ını kontrol ederek doğrulama işlemi gerçekleştirir. Bu işlem başarılı olduğunda, token’ın geçerliliğini doğrular ve kullanıcının uygulama içinde gezinmesine izin verir. Eğer token geçersiz ise kullanıcının erişimi engellenir."