JSON वेब टोकन (JWT) के माध्यम से प्रमाणीकरण का व्यापक रूप से एपीआई को सुरक्षित करने और यह सुनिश्चित करने के लिए उपयोग किया जाता है कि केवल अधिकृत उपयोगकर्ता ही कुछ डेटा तक पहुंच सकते हैं। इस पोस्ट में, हम आपको दिखाएंगे कि टोकन जेनरेशन से लेकर सुरक्षित उपयोगकर्ता सत्र प्रबंधन तक, टाइपस्क्रिप्ट का उपयोग करके Node.js के साथ बैकएंड पर और ReactJS के साथ फ्रंटएंड पर JWT को कैसे कॉन्फ़िगर किया जाए।

Node.js के साथ बैकएंड को कॉन्फ़िगर करना

सबसे पहले, आइए Node.js, Express और टाइपस्क्रिप्ट के साथ एक API बनाएं जो 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 फ़ाइल बनाएं:

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

चरण 2: बैकएंड की संरचना करना

प्रमाणीकरण मार्गों को व्यवस्थित करने के लिए एक सर्वर.टीएस फ़ाइल और एक रूट फ़ोल्डर से शुरू करके एक सरल संरचना बनाएं।

सर्वर.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 के साथ फ्रंटएंड को कॉन्फ़िगर करना

फ्रंटएंड पर, हम प्रमाणीकरण को संभालने, क्रेडेंशियल भेजने और जेडब्ल्यूटी टोकन को संग्रहीत करने के लिए रिएक्ट का उपयोग करेंगे।

चरण 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: फ्रंटएंड में मार्गों को सुरक्षित रखें

एपीआई तक पहुंचने के लिए जेडब्ल्यूटी टोकन का उपयोग करके संरक्षित मार्गों के लिए एक फ़ंक्शन बनाएं।

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 टोकन भेजें

संरक्षित अनुरोधों में 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('');

    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 प्रमाणीकरण सेट करते हैं जो बैकएंड पर Node.js और फ्रंटएंड पर रिएक्ट का उपयोग करता है। आधुनिक अनुप्रयोगों की सुरक्षा के लिए यह दृष्टिकोण अत्यधिक सुरक्षित, कुशल और व्यापक रूप से अपनाया गया है।