프런트엔드 및 백엔드에서 JWT를 사용한 인증: Node.js 및 ReactJS로 구현(TypeScript에서)

JWT(JSON Web Token)를 통한 인증은 API를 보호하고 승인된 사용자만 특정 데이터에 액세스할 수 있도록 하는 데 널리 사용됩니다. 이 게시물에서는 토큰 생성부터 안전한 사용자 세션 관리에 이르기까지 TypeScript를 사용하여 Node.js를 사용하는 백엔드와 ReactJS를 사용하는 프런트엔드에서 JWT를 구성하는 방법을 보여드리겠습니다.

Node.js로 백엔드 구성

먼저 JWT 토큰을 생성하고 검증하는 Node.js, Express, TypeScript를 사용하여 API를 만들어 보겠습니다.

1단계: 환경 구성

새 프로젝트를 생성하고 주요 종속 항목을 설치합니다.

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

TypeScript 구성을 위한 tsconfig.json 파일을 만듭니다.

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

2단계: 백엔드 구조화

server.ts 파일과 경로 폴더로 시작하여 인증 경로를 구성하는 간단한 구조를 만듭니다.

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<string>('');
    const [password, setPassword] = useState<string>('');
    const [error, setError] = useState<string>('');

    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 (
        <form onSubmit={handleLogin}>
            <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button type="submit">Login</button>
            {error && <p>{error}</p>}
        </form>
    );
};

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<any>;
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) =>
            localStorage.getItem('token') ? (
                <Component {...props} />
            ) : (
                <Redirect to="/login" />
            )
        }
    />
);

export default PrivateRoute;

3단계: 요청으로 JWT 토큰 보내기

보호된 요청에 JWT 토큰을 자동으로 포함하도록 axios를 구성하세요.

axiosConfig.ts

import axios from 'axios';

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

export default axios;

4단계: 보호된 경로를 사용한 사용 예

이제 액세스하려면 토큰이 필요한 보호된 페이지의 예를 만들어 보세요.

대시보드.tsx

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

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

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

    return <h1>{data || 'Carregando...'}</h1>;
};

export default Dashboard;

결론

이러한 단계를 통해 백엔드에서 Node.js를 사용하고 프런트엔드에서 React를 사용하는 프로젝트에 대해 TypeScript에서 전체 JWT 인증을 설정했습니다. 이 접근 방식은 매우 안전하고 효율적이며 최신 애플리케이션을 보호하기 위해 널리 채택되고 있습니다.

위 내용은 프런트엔드 및 백엔드에서 JWT를 사용한 인증: Node.js 및 ReactJS로 구현(TypeScript에서)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!