Аутентификация — это процесс проверки подлинности пользователя. В React есть несколько подходов к реализации, которые можно комбинировать в зависимости от требований безопасности и UX.
Популярный подход для SPA (Single Page Applications):
// Пример контекста для хранения состояния аутентификации
import { createContext, useState, useEffect } from 'react';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const login = async (credentials) => {
const response = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(credentials)
});
const { token, user } = await response.json();
localStorage.setItem('token', token);
setUser(user);
};
const logout = () => {
localStorage.removeItem('token');
setUser(null);
};
useEffect(() => {
// Проверка токена при монтировании
const token = localStorage.getItem('token');
if (token) {
// Валидация токена и получение данных пользователя
fetchUserData(token).then(user => setUser(user));
}
}, []);
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
};
Более безопасный подход, требует бэкенд:
// Пример ProtectedRoute компонента
const ProtectedRoute = ({ children }) => {
const { user } = useAuth();
const location = useLocation();
if (!user) {
return <Navigate to="/login" state={{ from: location }} replace />;
}
return children;
};
// Использование в роутинге
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
Использование провайдеров (Google, Facebook, GitHub):
// Пример с Google OAuth
import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
const AuthPage = () => (
<GoogleOAuthProvider clientId="YOUR_CLIENT_ID">
<GoogleLogin
onSuccess={credentialResponse => {
// Отправляем credentialResponse.credential на сервер для верификации
}}
onError={() => console.error('Login Failed')}
/>
</GoogleOAuthProvider>
);
Реализация через Higher-Order Component:
const withAuth = (Component) => {
return (props) => {
const { user } = useAuth();
const navigate = useNavigate();
useEffect(() => {
if (!user) navigate('/login');
}, [user, navigate]);
return user ? <Component {...props} /> : null;
};
};
Паттерн для продления сессии:
// Интерцептор для axios
api.interceptors.response.use(
response => response,
async error => {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('token', newToken);
originalRequest.headers.Authorization = `Bearer ${newToken}`;
return api(originalRequest);
}
return Promise.reject(error);
}
);
реализация аутентификации в React требует комплексного подхода - от выбора стратегии (JWT, сессии, OAuth) до правильного хранения токенов и защиты маршрутов. Всегда проверяйте данные на сервере и соблюдайте меры безопасности. Для enterprise-приложений рассмотрите использование готовых решений типа Auth0 или Firebase Auth.