Авторизация с использованием JWT в React JS
Авторизация пользователей — ключевой аспект безопасности во многих веб-приложениях. Использование JSON Web Tokens (JWT) является популярным способом обеспечения этой авторизации, особенно при разработке клиентских приложений на React JS.
Настройка проекта
Для начала необходимо создать новый React-приложение с помощью команды:
«`bash
npx create-react-app my-auth-app
«`
Перейдите в папку проекта и установите необходимые библиотеки:
«`bash
cd my-auth-app
npm install axios jsonwebtoken react-router-dom
«`
Конфигурация маршрутов
Для организации навигации в приложении используем `react-router-dom`. В файле `App.js` подключим необходимые компоненты:
«`jsx
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import Login from ‘./components/Login’;
import Dashboard from ‘./components/Dashboard’;
function App() {
return (
);
}
export default App;
«`
Компонент Login
В компоненте `Login` пользователи вводят свои учетные данные, и если они верны, сервер отправляет JWT. Создадим этот компонент:
«`jsx
import React, { useState } from ‘react’;
import axios from ‘axios’;
function Login({ history }) {
const [email, setEmail] = useState(»);
const [password, setPassword] = useState(»);
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(‘http://localhost:5000/api/login’, { email, password });
localStorage.setItem(‘token’, response.data.token);
history.push(‘/dashboard’);
} catch (error) {
console.error(Ошибка авторизации, error.response);
}
};
return (
);
}
export default Login;
«`
Компонент Dashboard
Компонент `Dashboard` доступен только авторизованным пользователям. Для этого проверяем наличие токена в локальном хранилище:
«`jsx
import React from ‘react’;
import { Redirect } from ‘react-router-dom’;
function Dashboard() {
const token = localStorage.getItem(‘token’);
if (!token) {
return
}
return (
Добро пожаловать в ваш личный кабинет!
{/* Содержимое дашборда */}
);
}
export default Dashboard;
«`
Защита API-запросов
Чтобы защищать API-запросы, добавляем токен в заголовки запросов. Создадим Axios интерцептор для этого:
«`jsx
import axios from ‘axios’;
const instance = axios.create();
instance.interceptors.request.use((config) => {
const token = localStorage.getItem(‘token’);
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, (error) => Promise.reject(error));
export default instance;
«`
Используем этот экземпляр Axios вместо стандартного для всех запросов.
Вывод
Использование JWT для авторизации на React JS упрощает процесс проверки подлинности и обеспечивает безопасность приложения. Пользователи получают токен после успешной аутентификации, который затем используется для доступа к защищённым ресурсам. Этот подход позволяет легко интегрировать сторонние сервисы и обеспечивает гибкость в управлении доступом.