Özet - Kimlik doğrulama

context, JWT ve protected route'u birleştirerek bir auth akışı yazarsın.

Özet - Kimlik doğrulama

Bu grupta auth context, login, JWT, protected route ve logout kavramlarını öğrendik. AuthContext merkezî state'i taşır; Provider ile tüm uygulamaya açılır. Login, auth.login({ user, token }) ile context'i günceller.

Token SecureStore'a yazılır, isteklerde Authorization: Bearer başlığıyla gönderilir. Protected screen'ler if (!user) ile login'e yönlendirir. Logout, token'ı siler ve setUser(null) yapar. Şimdi bunları birleştirip çalışan bir auth iskeleti yazacağız.

Uygulama Özet - Auth provider iskeleti

AuthProvider bileşenini tamamla. useState(null) ile user state'i tanımla. login işlevi setUser(data) yapsın. AuthContext.Provider ile value={{ user, login }} döndür.

Örnek çözümü göster

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

export const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  function login(data) {
    setUser(data);
  }
  return (
    <AuthContext.Provider value={{ user, login }}>
      {children}
    </AuthContext.Provider>
  );
}

Uygulama Özet - Full logout

logout işlevini tamamla. await SecureStore.deleteItemAsync('token') ile token'ı sil. setUser(null) ile context'i sıfırla. İşlev async olmalı.

Örnek çözümü göster

import * as SecureStore from 'expo-secure-store';

export function makeFullLogout(setUser) {
  async function logout() {
    await SecureStore.deleteItemAsync('token');
    setUser(null);
  }
  return { logout };
}

Kendini test et

Akış parçalarını eşle

createContext

AuthContext'i oluşturur
login({ user, token })

Context'i günceller
Bearer ${token}

Authorization başlığı
deleteItemAsync('token')

Logout'ta siler

Bearer başlığını yaz

headers: { Authorization: `Bearer ${____}` }

Cevabı göster

headers: { Authorization: `Bearer ${token}` }

Sıradaki ders: Redux nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler