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

Barbara Streisand
Lepaskan: 2024-11-01 15:18:02
asal
503 orang telah melayarinya

Autenticação com JWT no Frontend e Backend: Implementando com Node.js e ReactJS (em 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
Salin selepas log masuk

Buat fail tsconfig.json untuk konfigurasi TypeScript:

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

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}`));
Salin selepas log masuk

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;
Salin selepas log masuk

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();
    });
};
Salin selepas log masuk

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;
Salin selepas log masuk

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;
Salin selepas log masuk

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;
Salin selepas log masuk

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;
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!