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.
Mula-mula, mari buat API dengan Node.js, Express dan TypeScript yang menjana dan mengesahkan token JWT.
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"] }
Buat struktur ringkas, bermula dengan fail server.ts dan folder route untuk mengatur laluan pengesahan.
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}`));
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;
Tambah perisian tengah untuk melindungi laluan yang memerlukan pengesahan.
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(); }); };
Di bahagian hadapan, kami akan menggunakan React untuk mengendalikan pengesahan, menghantar bukti kelayakan dan menyimpan token JWT.
Mula-mula, buat komponen Login.tsx untuk menangkap bukti kelayakan pengguna dan hantar permintaan log masuk ke bahagian belakang.
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;
Buat fungsi untuk laluan yang dilindungi, menggunakan token JWT untuk mengakses API.
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;
Konfigurasikan aksios untuk memasukkan token JWT secara automatik dalam permintaan yang dilindungi.
import axios from 'axios'; const token = localStorage.getItem('token'); if (token) { axios.defaults.headers.common['Authorization'] = token; } export default axios;
Sekarang, buat contoh halaman dilindungi yang memerlukan token untuk diakses.
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;
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!