Protected routes

Protected route ve navigation guard öğrenirsin.

Protected route

Protected route, yalnızca giriş yapmış kullanıcıların görebileceği ekranlardır. Kullanıcı giriş yapmadıysa login ekranına yönlendirilir. Bunu yapmak için ekranda bir guard kontrolü yapılır: if (!user) return <Navigate to='Login' />.

React Navigation ile bu, useEffect ve useNavigation ile yapılır. Ekrana girildiğinde user kontrol edilir; yoksa navigation.replace('Login') çağrılır. Bu sayede korumalı içerik giriş yapmamış kullanıcıya görünmez.

Navigation guard

Guard, ekran açıldığında çalışan bir useEffect içinde yazılır. useEffect'in bağımlılık dizisinde user olmalı; böylece kullanıcı değiştiğinde kontrol yeniden çalışır. Boş dizi verirsen açılışta yalnızca bir kez çalışır.

İçeride if (!user) navigation.replace('Login') yazılır. replace, geri tuşunun login'e dönmesini engeller; navigate yerine tercih edilir. Böylece kullanıcı geri basınca uygulamadan çıkar; login'e geri dönmez.

Uygulama ProtectedScreen yaz

ProtectedScreen bileşenini tamamla. useContext(AuthContext) ile user'ı al. useEffect içinde if (!user) navigation.replace('Login') yaz. useEffect bağımlılık dizisinde user olsun.

Örnek çözümü göster

import React, { useContext, useEffect } from 'react';
import { Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { AuthContext } from './AuthContext';

export function ProtectedScreen() {
  const { user } = useContext(AuthContext);
  const navigation = useNavigation();

  useEffect(() => {
    if (!user) navigation.replace('Login');
  }, [user]);

  return (
    <View>
      <Text>Hosgeldin</Text>
    </View>
  );
}

Kendini test et

Guard parçalarını eşle

useEffect

Açılışta kontrolü yapar
useNavigation

Yönlendirme sağlar
navigation.replace

Login'e atlar
AuthContext

user bilgisini verir

Yönlendirme çağrısı

if (!user) {
  navigation.____('Login');
}

Cevabı göster

if (!user) {
  navigation.replace('Login');
}

Guard neden replace tercih eder?
- Geri tuşunun login'e dönmesini engellemek için
- Daha hızlı animasyon için
- Stilleri değiştirmek için
- Daha az bellek için
Cevabı göster

Stilleri değiştirmek için — replace, geri tuşunun login'e dönmesini engeller.

Sıradaki ders: Logout

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler