Аутентификация с помощью JSON Web Token (JWT) широко используется для защиты API и обеспечения доступа к определенным данным только авторизованным пользователям. В этом посте мы покажем вам, как настроить JWT на серверной стороне с помощью Node.js и на внешней стороне с помощью ReactJS с использованием TypeScript, от генерации токена до безопасного управления сеансами пользователей.
Во-первых, давайте создадим API с Node.js, Express и TypeScript, который генерирует и проверяет токены JWT.
Создайте новый проект и установите основные зависимости:
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"] }
Создайте простую структуру, начиная с файла 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}`));
Создайте файл для маршрутов аутентификации. Здесь у нас будет маршрут входа, который будет проверять пользователя и возвращать токен 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;
Добавьте промежуточное ПО для защиты маршрутов, требующих аутентификации.
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(); }); };
Во внешнем интерфейсе мы будем использовать React для аутентификации, отправки учетных данных и хранения токена JWT.
Сначала создайте компонент Login.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 ( ); }; export default Login;
Создайте функцию для защищенных маршрутов, используя токен JWT для доступа к API.
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;
Настройте Axios для автоматического включения токена JWT в защищенные запросы.
import axios from 'axios'; const token = localStorage.getItem('token'); if (token) { axios.defaults.headers.common['Authorization'] = token; } export default axios;
Теперь создайте пример защищенной страницы, для доступа к которой требуется токен.
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 на внешней стороне. Этот подход очень безопасен, эффективен и широко применяется для защиты современных приложений.
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3