Аутентификация с помощью JSON Web Token (JWT) широко используется для защиты API и обеспечения доступа к определенным данным только авторизованным пользователям. В этом посте мы покажем вам, как настроить JWT на серверной стороне с помощью Node.js и на внешней стороне с помощью ReactJS с использованием TypeScript, от генерации токена до безопасного управления сеансами пользователей.

Настройка бэкэнда с помощью Node.js

Во-первых, давайте создадим API с Node.js, Express и TypeScript, который генерирует и проверяет токены JWT.

Шаг 1. Настройка среды

Создайте новый проект и установите основные зависимости:

npm init -y
npm install express jsonwebtoken bcryptjs dotenv
npm install -D typescript @types/node @types/express @types/jsonwebtoken @types/bcryptjs ts-node

Создайте файл tsconfig.json для конфигурации TypeScript:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Шаг 2. Структурирование серверной части

Создайте простую структуру, начиная с файла server.ts и папки маршрутов для организации маршрутов аутентификации.

сервер.ц

import express, { Application } from 'express';
import dotenv from 'dotenv';
import authRoutes from './routes/authRoutes';

dotenv.config();

const app: Application = express();
app.use(express.json());

app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`));

маршруты/authRoutes.ts

Создайте файл для маршрутов аутентификации. Здесь у нас будет маршрут входа, который будет проверять пользователя и возвращать токен JWT.

import express, { Request, Response } from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';

const router = express.Router();

// Simulação de banco de dados
const users = [{ username: 'usuario', password: 'senha123' }];

router.post('/login', async (req: Request, res: Response) => {
    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user || !(await bcrypt.compare(password, user.password))) {
        return res.status(401).json({ message: 'Credenciais inválidas' });
    }

    const token = jwt.sign({ username }, process.env.JWT_SECRET as string, { expiresIn: '1h' });
    res.json({ token });
});

export default router;

Шаг 3. Защита маршрутов с помощью промежуточного программного обеспечения

Добавьте промежуточное ПО для защиты маршрутов, требующих аутентификации.

промежуточное программное обеспечение/authMiddleware.ts

import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

interface JwtPayload {
    username: string;
}

export const authMiddleware = (req: Request, res: Response, next: NextFunction): void => {
    const token = req.headers['authorization'];
    if (!token) {
        res.status(403).json({ message: 'Token não fornecido' });
        return;
    }

    jwt.verify(token, process.env.JWT_SECRET as string, (err, decoded) => {
        if (err) {
            res.status(401).json({ message: 'Token inválido' });
            return;
        }
        req.user = decoded as JwtPayload;
        next();
    });
};

Настройка внешнего интерфейса с помощью ReactJS

Во внешнем интерфейсе мы будем использовать React для аутентификации, отправки учетных данных и хранения токена JWT.

Шаг 1. Настройка интерфейса входа в систему

Сначала создайте компонент Login.tsx для сбора учетных данных пользователя и отправки запроса на вход в серверную часть.

Логин.tsx

import React, { useState } from 'react';
import axios from 'axios';

const Login: React.FC = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const response = await axios.post('/api/auth/login', { username, password });
            localStorage.setItem('token', response.data.token);
            window.location.href = '/dashboard';
        } catch (err) {
            setError('Credenciais inválidas');
        }
    };

    return (
        

             setUsername(e.target.value)}
            />
             setPassword(e.target.value)}
            />
            Login
            {error && 
{error}
}
        
    );
};

export default Login;

Шаг 2. Защитите маршруты во внешнем интерфейсе

Создайте функцию для защищенных маршрутов, используя токен JWT для доступа к API.

PrivateRoute.tsx

import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';

interface PrivateRouteProps extends RouteProps {
    component: React.ComponentType;
}

const PrivateRoute: React.FC = ({ component: Component, ...rest }) => (
    
            localStorage.getItem('token') ? (
                
            ) : (
                
            )
        }
    />
);

export default PrivateRoute;

Шаг 3. Отправьте токен JWT в запросах.

Настройте Axios для автоматического включения токена JWT в защищенные запросы.

axiosConfig.ts

import axios from 'axios';

const token = localStorage.getItem('token');
if (token) {
    axios.defaults.headers.common['Authorization'] = token;
}

export default axios;

Шаг 4. Пример использования защищенного маршрута

Теперь создайте пример защищенной страницы, для доступа к которой требуется токен.

Dashboard.tsx

import React, { useEffect, useState } from 'react';
import axios from './axiosConfig';

const Dashboard: React.FC = () => {
    const [data, setData] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('/api/protected');
                setData(response.data.message);
            } catch (error) {
                console.error(error);
            }
        };
        fetchData();
    }, []);

    return 
{data || 'Carregando...'}
;
};

export default Dashboard;

Заключение

С помощью этих шагов мы настроили полную аутентификацию JWT в TypeScript для проекта, который использует Node.js на серверной части и React на внешней стороне. Этот подход очень безопасен, эффективен и широко применяется для защиты современных приложений.