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

news2025/5/9 22:55:42

下面是一个用 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>
  );
}