Axios ve React ile Auth İşlemleri Nasıl Gerçekleştirilir?

Adı : Axios ve React ile Auth İşlemleri Nasıl Gerçekleştirilir?

Axios ve React ile Auth İşlemleri

Web geliştirme alanında, kullanıcı doğrulama (authentication) çok önemlidir ve bu işlem genellikle kullanılan API ile gerçekleştirilmektedir. Axios, React uygulamaları için kullanılan bir HTTP istemci kütüphanesi olduğundan, kullanıcı doğrulama işlemlerinin gerçekleştirilmesi için tercih edilen bir seçenektir.

Kullanıcı doğrulama işlemlerinin başarılı bir şekilde gerçekleştirilmesi için React uygulamasının, güvenli bir kimlik doğrulama mekanizması oluşturulması gerekir. Bu mekanizma, kullanıcıların kimlik bilgilerini ve verilerini güvenle korumalıdır.

Axios ve React ile kullanıcı doğrulama işlemlerini nasıl gerçekleştireceğimizi, adım adım inceleyelim.

Öncelikle, Axios ile bir kullanıcı girişi yapmak için kullanılan örnek bir POST isteği aşağıdaki gibi olabilir:

```js
Axios.post('/login', {
userEmail: 'user@example.com',
userPassword: 'password'
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
});
```

Bu örnekte, Axios, /login adresine kullanıcı giriş bilgilerini POST isteği ile gönderiyor. Ardından, sunucudan gelen yanıtı (response) kontrol ederek, işlemin başarılı olup olmadığını belirleyebiliriz.

Kullanıcı girişi için örnek bir Axios isteği yaptıktan sonra, API tarafının yanıtına göre kullanıcıyı doğrulamamız gerekiyor. Kullanıcı doğrulama işlemi ise, kullanıcının kimlik bilgilerinin doğru olup olmadığını kontrol ederek, çağrı yapılan API tarafından verilir.

Bununla birlikte, kullanıcı bilgilerini saklamak için global bir state kullanabiliriz. Kullanıcının doğrulama bilgileri, Redux Store, Context API veya LocalStorage gibi bir depolama alanında saklanabilir.

Örnek bir Redux Store kullanarak, kullanıcı oturum açma işlemini şu şekilde gerçekleştirebiliriz:

**1. store.js dosyası**

```js
import { createStore } from 'redux';

const initialState = {
isLoggedIn: false,
user: {}
};

const reducer = (state = initialState, action) => {
switch (action.type) {
case 'LOGIN':
return {
...state,
isLoggedIn: true,
user: { ...action.payload }
};
case 'LOGOUT':
return initialState;
default:
return state;
}
};

const store = createStore(reducer);

export default store;
```

Bu dosyada, Reducer kullanarak kullanıcının oturum açma durumunu sakladık. İlk durumda, kullanıcının oturum açmadığı varsayılarak bir initialState oluşturduk.

**2. login.js dosyası**

```js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import Axios from 'axios';

const Login = () => {
const dispatch = useDispatch();
const [userEmail, setUserEmail] = useState('');
const [userPassword, setUserPassword] = useState('');

const submitLogin = () => {
Axios.post('/login', {
userEmail,
userPassword
}).then(response => {
dispatch({
type: 'LOGIN',
payload: response.data.user
});
setUserEmail('');
setUserPassword('');
}).catch(error => {
console.log(error)
});
};

return (

);
};

export default Login;
```

Kullanıcının, oturum açma işlemini gerçekleştirmek için Redux Store kullanarak, kullanıcı oturum açma durumunu saklamış ve oturum açma işlemi gerçekleştirildiğinde yeni bir durum oluşturmuştur.

Artık, kullanıcının başka bir işlem yapabilmesi için oturum açmış olması gerekiyor. Bu durumda, kullanıcının oturum açmış durumunu saklamak gerekiyor. Reducer içindeki LOGIN case, authToken dışında kullanıcının diğer bilgilerini de saklamamızı sağlamaktadır.

Örneğin, kullanıcının bilgilerini bir profile sayfasında kullanabileceğimizi varsayalım:

```js
import React from 'react';
import { useSelector } from 'react-redux';

const Profile = () => {
const { user } = useSelector(state => state);

return (

);
};

export default Profile;
```

Bu şekilde, kullanıcının oturum açma bilgilerini Axios ve React ile güvenli bir şekilde saklamayı ve kontrol etmeyi öğrenmiş olduk.

---

Sık Sorulan Sorular

**1- Axios nedir?**

Axios, JavaScript uygulamalarına HTTP/HTTPS istekleri göndermek için kullanılan bir istemci kütüphanesidir.

**2- React Context API nedir?**

Context API, React uygulamalarında depolama alanı sağlayan bir araçtır. Tüm bileşenlerine veri aktarmak yerine, Context API kullanarak yalnızca ihtiyaç duyulan bileşenlere veri aktarabilirsiniz.

**3- Redux nedir?**

Redux, JavaScript uygulamalarında durum yönetimini sağlamak için kullanılan bir kütüphanedir. Redux, bileşenler arasında durum paylaşımını kolaylaştırır ve uygulama boyunca tek bir depolama alanında tutulacak bilgiyi sağlar.

**4- Kullanıcı verilerini nerede saklamalıyız?**

Kullanıcı verileri genellikle Redux Store, Context API veya LocalStorage gibi bir depolama alanında saklanır. Bu depolama alanları, uygulamanın yapısına ve gereksinimlerine bağlı olarak değişebilir."