Pengesahan dengan JWT pada Frontend dan Backend: Melaksanakan dengan Node.js dan ReactJS (dalam TypeScript)

Pengesahan melalui JSON Web Token (JWT) digunakan secara meluas untuk melindungi API dan memastikan bahawa hanya pengguna yang diberi kuasa boleh mengakses data tertentu. Dalam siaran ini, kami akan menunjukkan kepada anda cara mengkonfigurasi JWT pada bahagian belakang dengan Node.js dan pada bahagian hadapan dengan ReactJS menggunakan TypeScript, daripada penjanaan token kepada pengurusan sesi pengguna yang selamat.

Mengkonfigurasi Bahagian Belakang dengan Node.js

Mula-mula, mari buat API dengan Node.js, Express dan TypeScript yang menjana dan mengesahkan token JWT.

Langkah 1: Mengkonfigurasi Persekitaran

Buat projek baharu dan pasang kebergantungan utama:

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

Buat fail tsconfig.json untuk konfigurasi TypeScript:

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

Langkah 2: Menstruktur Bahagian Belakang

Buat struktur ringkas, bermula dengan fail server.ts dan folder route untuk mengatur laluan pengesahan.

pelayan.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}`));

route/authRoutes.ts

Buat fail untuk laluan pengesahan. Di sini kita akan mempunyai laluan log masuk yang akan mengesahkan pengguna dan mengembalikan token 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;

Langkah 3: Melindungi Laluan dengan Middleware

Tambah perisian tengah untuk melindungi laluan yang memerlukan pengesahan.

middleware/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();
    });
};

Mengkonfigurasi Frontend dengan ReactJS

Di bahagian hadapan, kami akan menggunakan React untuk mengendalikan pengesahan, menghantar bukti kelayakan dan menyimpan token JWT.

Langkah 1: Mengkonfigurasi Antara Muka Log Masuk

Mula-mula, buat komponen Login.tsx untuk menangkap bukti kelayakan pengguna dan hantar permintaan log masuk ke bahagian belakang.

Log masuk.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;

Langkah 2: Lindungi Laluan di Bahagian Hadapan

Buat fungsi untuk laluan yang dilindungi, menggunakan token JWT untuk mengakses 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;

Langkah 3: Hantar Token JWT dalam Permintaan

Konfigurasikan aksios untuk memasukkan token JWT secara automatik dalam permintaan yang dilindungi.

axiosConfig.ts

import axios from 'axios';

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

export default axios;

Langkah 4: Contoh Penggunaan dengan Laluan Dilindungi

Sekarang, buat contoh halaman dilindungi yang memerlukan token untuk diakses.

Papan pemuka.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;

Kesimpulan

Dengan langkah ini, kami menyediakan pengesahan JWT penuh dalam TypeScript untuk projek yang menggunakan Node.js pada bahagian belakang dan React pada bahagian hadapan. Pendekatan ini sangat selamat, cekap dan digunakan secara meluas untuk melindungi aplikasi moden.

Atas ialah kandungan terperinci Pengesahan dengan JWT pada Frontend dan Backend: Melaksanakan dengan Node.js dan ReactJS (dalam TypeScript). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!