Спрощення аутентифікації в React за допомогою Context API

React надає Context API, потужну можливість, яка дозволяє ділитися станом і логікою між компонентами без необхідності вручну передавати props на кожному рівні. Це особливо корисно для управління станом аутентифікації, оскільки дає можливість безшовного доступу до даних аутентифікації, таких як деталі увійшовшого користувача, в усьому додатку.

Ось як AuthContext надає дані аутентифікації всьому додатку:

1. Визначення AuthContext

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

const AuthContext = createContext(null);  

export const AuthProvider = ({ children }) => {  
 const [isLoggedIn, setIsLoggedIn] = useState(false);  
 const [user, setUser] = useState(null);  

 const login = (userName) => {  
 setIsLoggedIn(true);  
 setUser({ name: userName });  
 };  

 const logout = () => {  
 setIsLoggedIn(false);  
 setUser(null);  
 };  

 return (  

 {children}  

 );  
};

2. Використання AuthContext в компонентах

import React, { useContext } from 'react';  
import { AuthContext } from './AuthProvider';  

const Profile = () => {  
 const { isLoggedIn, user, login, logout } = useContext(AuthContext);  

 if (!isLoggedIn) {  
 return (  

Ви не увійшли в систему!
 login('FirstName LastName')}>Увійти    
    );    }       return (    
Ласкаво просимо, {user.name}!
Вихід    
    );   };      export default Profile; ```  

## 3. Оберніть ваш додаток за допомогою AuthProvider

Переконайтесь, що обгортаєте додаток за допомогою `AuthProvider`, щоб усі компоненти могли отримати доступ до `AuthContext`.

import React from 'react';
import ReactDOM from 'react-dom';
import { AuthProvider } from './AuthProvider';
import Profile from './Profile';

const App = () => ( );

ReactDOM.render(, document.getElementById('root'));
```

Основні переваги:

• Без пропсів на кожному рівні: Компоненти можуть отримати доступ до інформації про вхід (isLoggedIn і user) безпосередньо через useContext.
• Повторно використовувана логіка: Функціональність для входу/виходу централізована в AuthProvider.
• Спрощене управління станом: Усі дані, пов'язані з аутентифікацією, зберігаються та передаються в одному місці.

Перекладено з: Simplifying Authentication in React with Context API