Özet - Kimlik doğrulama
- React Native kursu
- İleri seviye
- Ders 48/83
- 5 dk
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.
Başlangıç kodu
import React, { createContext, useState } from 'react';
export const AuthContext = createContext(null);
export function AuthProvider({ children }) {
// user state, login işlevi ve Provider döndür
}Örnek çözüm
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ı.
Başlangıç kodu
import * as SecureStore from 'expo-secure-store';
export function makeFullLogout(setUser) {
// logout işlevini yaz
}Örnek çözüm
import * as SecureStore from 'expo-secure-store';
export function makeFullLogout(setUser) {
async function logout() {
await SecureStore.deleteItemAsync('token');
setUser(null);
}
return { logout };
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Akış parçalarını eşle
| Kavram | Anlamı |
|---|---|
createContext |
AuthContext'i oluşturur |
login({ user, token }) |
Context'i günceller |
Bearer ${token} |
Authorization başlığı |
deleteItemAsync('token') |
Logout'ta siler |
2 Bearer başlığını yaz
headers: { Authorization: `Bearer ${____}` }headers: { Authorization: `Bearer ${token}` }Açıklama: token değişkeni başlığa eklenir.