当前位置：首页 > news >正文

React 实现 JWT 登录验证的最小可运行示例

news 来源：原创 2025/5/9 8:20:33

下面是一个用 React 实现 JWT 登录验证的最小可运行示例，包含：

React 前端：登录、保存 Token、获取用户数据。
模拟后端：用 mock API（你也可以接真后端）。

🧱 技术栈

React（使用 Vite）
axios 发送请求
localStorage 保存 JWT
使用一个假的后端 API（模拟 JWT 认证）

🚀 最终效果

用户输入用户名和密码登录；
服务器返回 JWT；
前端保存 JWT；
访问受保护的用户信息页时，携带 JWT 请求头访问。

🛠️ 第一步：初始化项目

npm create vite@latest jwt-demo -- --template react
cd jwt-demo
npm install
npm install axios

在这里插入图片描述

📁 目录结构

src/
├─ App.jsx
├─ pages/
│  ├─ Login.jsx
│  └─ Profile.jsx
├─ api.js
└─ main.jsx

✏️ 第二步：代码实现

🔹 `src/api.js`（模拟 API）

import axios from 'axios';const mockToken = "fake-jwt-token-123456";export async function login(username, password) {if (username === 'admin' && password === '123456') {return { token: mockToken };} else {throw new Error('登录失败');}
}export async function getProfile(token) {if (token === mockToken) {return { username: 'admin', email: 'admin@example.com' };} else {throw new Error('无效Token');}
}

🔹 `src/pages/Login.jsx`

import { useState } from 'react';
import { login } from '../api';export default function Login({ onLogin }) {const [username, setUsername] = useState('');const [password, setPassword] = useState('');const [error, setError] = useState('');const handleLogin = async () => {try {const res = await login(username, password);localStorage.setItem('token', res.token);onLogin();} catch (e) {setError('用户名或密码错误');}};return (<div><h2>登录</h2><input placeholder="用户名" value={username} onChange={e => setUsername(e.target.value)} /><br /><input type="password" placeholder="密码" value={password} onChange={e => setPassword(e.target.value)} /><br /><button onClick={handleLogin}>登录</button>{error && <p style={{ color: 'red' }}>{error}</p>}</div>);
}

🔹 `src/pages/Profile.jsx`

import { useEffect, useState } from 'react';
import { getProfile } from '../api';export default function Profile() {const [profile, setProfile] = useState(null);const [error, setError] = useState('');useEffect(() => {const token = localStorage.getItem('token');getProfile(token).then(data => setProfile(data)).catch(err => setError('认证失败，请重新登录'));}, []);if (error) return <p>{error}</p>;if (!profile) return <p>加载中...</p>;return (<div><h2>用户信息</h2><p>用户名: {profile.username}</p><p>邮箱: {profile.email}</p></div>);
}

🔹 `src/App.jsx`

import { useState } from 'react';
import Login from './pages/Login';
import Profile from './pages/Profile';export default function App() {const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('token'));const handleLogout = () => {localStorage.removeItem('token');setIsLoggedIn(false);};return (<div>{isLoggedIn ? (<><Profile /><button onClick={handleLogout}>退出登录</button></>) : (<Login onLogin={() => setIsLoggedIn(true)} />)}</div>);
}