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

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

news 来源：原创 2025/8/12 21:07:17

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

✅ 运行

npm run dev

在这里插入图片描述

访问 http://localhost:5173，输入：

用户名：admin
密码：123456

然后你将登录并看到用户信息页，JWT 被保存在 localStorage。

后面重启后就不用再输入密码了
在这里插入图片描述

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

下面是一个用 React 实现 JWT 登录验证的最小可运行示例，包含： React 前端：登录、保存 Token、获取用户数据。模拟后端：用 mock API（你也可以接真后端）。 🧱 技术栈 React（使用 Vi…...

编程日记 2025/8/12 21:07:17

MySQL报错解决过程

我在调试datagrip的时候，显示拒绝连接，开始的时候，我以为只是服务没有开启，结果到后来在网上搜索各种解决办法无果后，就选择卸载，卸载之后安装新的MySQL 以下就是我的解决过程。如果只是在使用外置软件&…...

编程日记 2025/8/12 21:03:02

WPF中解决数据绑定不匹配的问题

在 WPF 开发中，IValueConverter 和 IMultiValueConverter 接口是非常实用的工具，它们允许你在数据绑定过程中对数据进行转换。 IValueConverter 接口示例 IValueConverter 接口用于单值转换，它包含 Convert 和 ConvertBack 两个方法。Conve…...

编程日记 2025/8/12 21:05:45

🌐 Cesium中的Entities系统趣味学习 📊 Entities系统架构流程图 #mermaid-svg-Lkue5O3gYOkEVSbD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Lkue5O3gYOkEVSbD .error-icon{fill:#552222;}#mermaid-svg-Lku…...

编程日记 2025/8/12 21:05:46

Spark处理过程-案例数据清洗

（一）需求说明准备十条符合包含用户信息的文本文件，每行格式为姓名,年龄,性别，需要清洗掉年龄为空或者非数字的行。例如： 张三,25,男李四,,女王五,30,男赵六,a,女孙七,35,男周八,40,女吴九,abc,男郑十,45,女…...

编程日记 2025/8/11 5:28:17

【AI提示词】马斯洛需求分析专家

提示说明专业的心理学需求分析专家，熟悉马斯洛需求层次理论及其在不同文化背景下的适用性。提示词 # Role: 马斯洛需求分析专家## Profile - language: 中文 - description: 专业的心理学需求分析专家，熟悉马斯洛需求层次理论及其在不同文化背景下的…...

编程日记 2025/8/12 21:04:56

【WebRTC-13】是在哪，什么时候，创建编解码器？

Android-RTC系列软重启，改变以往细读源代码的方式改为带上实际问题分析代码。增加实用性，方便形成肌肉记忆。同时不分种类、不分难易程度，在线征集问题切入点。问题：编解码器的关键实体类是什么？在哪里&什么时候…...

编程日记 2025/8/10 8:17:13

Kuikly 安装环境篇

1、安装版本号为2024.1.1 的Android studio（如使用高版本的Android studio需要更改JDK版本号为17） 2、JDK版本使用17（如需要修改JDK：Android Studio -> Settings -> Build,Execution,Deployment -> Build Tools -> Gr…...

编程日记 2025/8/12 21:03:51

npm create vite@latest my-vue-app 解读

背景发荧光的样式。 filter属性的学习：filter - CSS：层叠样式表 | MDN 复习一下em 组件的调用: 是msg让“ViteVue”显示出来的！！ a标签的targte属性： 组件之间怎么传值的： ，没看懂code标签怎么…...

编程日记 2025/8/12 21:03:04

【本地搭建npm私服】使用Verdaccio

使用Verdaccio搭建本地NPM私服及私有包管理指南一、Verdaccio安装与基础配置 1. 安装Verdaccio # 全局安装Verdaccio npm install -g verdaccio# 检查版本 verdaccio --version2. 启动服务 verdaccio启动后默认监听4873端口，访问 http://localhost:4873 3. 配…...

编程日记 2025/8/8 2:21:17

Chroma：一个开源的8.9B文生图模型

Chroma 模型讲解一、模型概述 Chroma 是一个基于 FLUX.1-schnell 的 8.9B 参数模型。它采用了 Apache 2.0 许可证，完全开源，允许任何人使用、修改和在其基础上进行开发，不存在企业限制。该模型目前正在训练中，训练数据集从 20M…...

编程日记 2025/8/12 21:04:55

量子通信技术及其在信息安全中的应用：开启无条件安全通信的新时代

前言在数字化时代，信息安全是全球关注的焦点。随着传统加密技术面临量子计算等新兴技术的挑战，量子通信作为一种基于量子力学原理的新型通信技术，因其无条件安全的特性而备受关注。量子通信不仅能够有效抵御量子计算的威胁，还能为…...

编程日记 2025/8/12 21:03:52

【杂谈】Godot 2D游戏窗口设置

如切如磋，如琢如磨。目录一、引言二、设置（一）基本尺寸（二）拉伸（三）手持设备朝向（四）窗口模式一、引言在开发2D游戏时，窗口尺寸的设定是游戏…...

编程日记 2025/8/7 18:21:30

MySQL 8.0 OCP认证考试题库持续更新

MySQL是属于甲骨文Oracle公司的一个世界知名的免费数据库产品，使用的范围广、企业多、人员也多，所以对MySQL认证关注的人也不少，MySQL的证书与Oracle的证书使用的是同一个模板，只是在内部的介绍上稍有不同，MySQL认证考…...

编程日记 2025/8/8 2:21:12

C++GO语言微服务基础技术②

目录 01 protobuf语法回顾 02 protobuf的编译、和其他序列化比较 03 查看protoc编译文件对比自定义封装 04 grpc安装简介 05 grpc服务远程调用作业布置 06 作业-grpc-server端 07 作业-grpc-client端 01 protobuf语法回顾 ## 编译 protobuf> 回顾：C 编译 …...

编程日记 2025/8/8 2:21:11

【使用switch结构输出季节】2021-11-23

缘由用switch语句设计程序一年有12个月-编程语言-CSDN问答 void 使用switch结构输出季节(int y) {//缘由https://ask.csdn.net/questions/7577096?spm1005.2025.3001.5141std::cout << y << "\t";switch (y){case 3: case 4: case 5:std::cout <<…...

编程日记 2025/8/8 2:21:09

【Bootstrap V4系列】学习入门教程之组件-下拉菜单（Dropdowns）

Bootstrap V4系列学习入门教程之组件-下拉菜单（Dropdowns） 下拉菜单（Dropdowns）一、Overview 概述二、Accessibility 可访问性三、Examples3.1 Single button 单按钮3.2 Split button 分割按钮四、Sizing 尺寸下拉菜单&#x…...

编程日记 2025/8/8 2:21:08

基础编程题目集 6-8 简单阶乘计算

本题要求实现一个计算非负整数阶乘的简单函数。函数接口定义： int Factorial( const int N ); 其中N是用户传入的参数，其值不超过12。如果N是非负整数，则该函数必须返回N的阶乘，否则返回0。裁判测试程序样例： #in…...

编程日记 2025/8/8 2:21:06

解决word里插入公式后打不开的问题

小铃铛最近在写毕业论文了，需要在文档里插入公式，然鹅一插入就卡死了，直接关闭文档后就再也打不开了，报错什么确定磁盘有空间（？总之就是文档损坏的意思） 这个时候不要慌，先把word后缀…...

编程日记 2025/8/11 5:55:46

android studio开发：设置屏幕朝向为竖屏，强制应用的包体始终以竖屏（纵向）展示

在 Android 中，要强制应用的包体始终以竖屏（纵向）展示，可以通过以下几种方式来实现： ✅ 方式一： 在 AndroidManifest.xml 中设置 Activity 的方向，这是最常用的方法。对所有需要强制竖屏的 Ac…...

编程日记 2025/8/7 6:21:19

中国自动驾驶研发解决方案，第一！

4月28日，IDC《中国汽车云市场(2024下半年)跟踪》报告发布，2024下半年中国汽车云市场整体规模达到65.1亿元人民币，同比增长27.4%。IDC认为，自动驾驶技术深化与生成式AI的发展将为汽车云打开新的成长天花板，推动云计算在…...

编程日记 2025/8/11 4:47:09

OpenCv实战笔记（3）基于opencv实现调用摄像头并实时显示画面

一、实现效果二、实现原理使用 OpenCV 打开摄像头，持续捕获视频帧，并在一个窗口中实时显示这些帧，直到用户按下 ESC 键退出。整体流程：打开摄像头（cv::VideoCapture）>创建图像显示窗口（cv…...

编程日记 2025/8/8 2:21:03

SpringBoot3 + Druid + DynamicDataSource + PgSQL 连接池优化方案

问题描述使用 SpringBoot Druid DynamicDataSource PgSQL 时遇到的连接过多未释放问题，一方面是升级DB Core对DB做Tuning，另一方面是优化Druid数据库连接池方案。关键优化方向连接泄漏检测与回收连接有效性验证合理的连接池大小配置闲置连接…...

编程日记 2025/8/8 2:21:01

C++ 深入解析数据结构中的 AVL树的插入涉及的旋转规则

欢迎来到干货小仓库 "普通程序员Google 超级程序员" 1、AVL 树的概念二叉搜索树虽可以缩短查找的效率，但如果数据有序或接近有序二叉搜索树将退化为单支树，查找元素相当于在顺序表中搜索元素，效率低下。例如在这种情况下&…...

编程日记 2025/8/9 22:19:37

c++中的引用

1，引用的基本使用： 作用：给变量起别名语法：数据类型 &别名原名 #include<iostream> using namespace std; int main() {int a10;int &ba;cout<<"a "<<a<<endl;cout<<&quo…...

编程日记 2025/8/8 3:37:51

零拷贝的简单复习

PageCache PageCache是内核缓冲区 DMA 没有DMA前的IO：整个数据的传输过程，都需要 CPU 亲自参与搬运数据的过程，而且这个过程中CPU 是不能做其他事情的 CPU发起IO 磁盘将数据放到磁盘缓冲区 CPU将磁盘缓冲区数据放到内核缓冲区 CPU将内核缓…...

编程日记 2025/8/10 17:10:11

CCF编程能力等级认证一级第一次课

介绍 CCF 编程能力等级认证（GESP）为青少年计算机和编程学习者提供学业能力验证的规则和平台，由中国计算机学会发起并主办。每年考试分四次，时间是每年的3月、6月、9月、12月，以当年每期公布的时间为准。 GESP适用年…...

编程日记 2025/8/7 10:41:18

芯片测试之Open-Short Test全解析：从原理到实战

大家好，我是硅言。最近在开发NORD的AC、DC测试程序，准备和大家聊聊NOR Flash一套完整的AC、DC测试，要测哪些参数，如何测试等等。OS测试（Open-Short Test，开短路测试）作为芯片测试"…...

编程日记 2025/8/12 13:39:37

文件包含任意文件读取

文件处理漏洞--文件包含 - wizard骑士 - 博客园 1，什么是文件包含程序开发人员一般会吧重复使用的函数写道单个文件中，需要使用某个函数时直接调用此文件，无需再次编写，文件调用的过程就是文件包含，所以将包含的文件…...

编程日记 2025/8/8 3:37:43

string[字符串中第一个的唯一字符][蓝桥杯]

使用哈希表解决 class Solution { public:int firstUniqChar(string s) {int arr[26];for(int i0;i<s.size();i){arr[s[i]-a];}for(int i0;i<s.size();i){if(arr[s[i]-a]1)return i;}return -1;} };...

编程日记 2025/8/7 19:19:00

sql server限制用户只能访问特定表

一个老系统的sqlserver 数据库需要新建一个用户，并限制这个新用户只能访问指定的几个数据表。 1.夺权创建用户简单，但是登录用户没有管理权，windows管理员登录用户也没有管理权限，这就需要夺权，在单用户模式下&…...

编程日记 2025/8/8 3:37:38

中级网络工程师知识点2

1.netstat -r:显示路由表信息 netstat -a:显示所有活动的TCP连接数以及计算机正在监听的TCP和UDP端口 netstat -e:显示以太网统计信息 netstat -n:以数字形式显示网络地址和端口号 2.display multicast forwarding-table 命令的作用是查看组播转发表信息。 display multic…...

编程日记 2025/8/8 3:37:36

SQL常用操作大全：复制表、跨库查询、删除重复数据

大家好，欢迎来到程序视点！我是你们的老朋友.小二！ SQL常用操作精华总结表结构与数据操作复制表结构： SELECT * INTO b FROM a WHERE 1<>1 (SQL Server专用) SELECT TOP 0 * INTO b FROM a (更通用) 拷贝表数据&#…...

编程日记 2025/8/8 3:37:34

辰鳗科技朱越洋：紧扣时代契机，全力投身能源转型战略赛道

国家能源局于4月28日出台的《关于促进能源领域民营经济发展若干举措的通知》（以下简称《通知》），是继2月民营企业座谈会后深化能源领域市场化改革的关键政策，标志着民营经济在“双碳”目标引领下正式进入能源转型的核心赛道。自…...

编程日记 2025/8/11 5:08:22

java 破解aspose.words 18.6 使用

资源包：https://download.csdn.net/download/qq_36598111/90787167 jar包是破解过的，直接可以使用。引入jar，要引入本地的，不要直接引入仓库的 <dependency><groupId>com.aspose</groupId><artifactId>…...

编程日记 2025/8/8 3:37:30

基于鸢尾花(Iris)数据集的分类模型

本文适合初学者入门，涵盖了数据加载、预处理、建模、训练和评估的全过程。 🎯 项目目标使用机器学习算法（如K近邻KNN）对鸢尾花的品种进行分类。 🧰 所需工具 Python 3.x 安装的库： pip install scikit…...

编程日记 2025/8/8 3:37:28

电容知识小结

1.同样是电容，1uf的陶瓷电容和1uf的铝电解电容是不一样的； 2.实际的电容等效为ESR C ESL;ESR等效电阻和ESL等效电感； 3.铝电解电容，瓷片电容和钽电容。 4.电容是容纳和释放电荷的电子器件； 5.电容的工作：…...

编程日记 2025/8/8 0:31:29

基于springboot+vue的校园部门资料管理系统

开发语言：Java框架：springbootJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7数据库工具：Navicat12开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9 系统展示系统登录学生组…...

编程日记 2025/8/8 3:37:24

LeetCode 热题 100 131. 分割回文串

LeetCode 热题 100 | 131. 分割回文串大家好，今天我们来解决一道经典的回溯算法问题——分割回文串。这道题在 LeetCode 上被标记为中等难度，要求将一个字符串 s 分割成若干个子串，使得每个子串都是回文串，并返回所有可能的分割…...

编程日记 2025/8/8 3:37:22

PostgreSQL 的 pg_start_backup 函数

PostgreSQL 的 pg_start_backup 函数 pg_start_backup 是 PostgreSQL 中用于执行物理备份的关键函数，它通过创建备份模式为数据库文件的一致性备份做准备。以下是该函数的全面解析： 一、函数基础 1. 函数语法 pg_start_backup(label text [, fast bo…...

编程日记 2025/8/11 20:59:14

理解 WKWebView 的 handlesURLScheme: 方法：判断 URL 协议是否由 WebView 默认处理

Overview 在 iOS 开发中，WKWebView 是一个强大的控件，用于在应用内嵌入网页内容。随着 iOS 11.0 的推出，WKWebView 支持自定义 URL 协议处理，这使得开发者可以更灵活地控制网页内的链接请求。今天，我们将详细介绍 han…...

编程日记 2025/8/8 3:37:18

400种行业劳动合同模板

400种行业劳动合同模板内容介绍这是一套包含400种行业的专业劳动合同模板合集，涵盖IT、建筑、教育、医疗等多个行业。所有模板均符合最新劳动法规定，可直接下载使用或根据需求修改。全日制劳动合同退休返聘协议劳务合同劳务，兼职&a…...

编程日记 2025/8/8 3:37:16

MyBatis 动态 SQL 完整笔记

MyBatis 动态 SQL 完整笔记一、核心动态 SQL 标签与用法 1. 条件控制类标签 <if>：基础条件判断示例：根据 name 和 age 动态筛选用户 <if test"name ! null and name ! ">AND user_name #{name} </if><choose>/<…...

编程日记 2025/8/11 7:05:33

npm包之serve-favicon

serve-favicon 是一个用于 Node.js 的中间件，它是 Express 框架的一部分。这个中间件的主要作用是提供网站的 favicon（网站图标），通常是一个小的图标文件（如 .ico），显示在浏览器的标签页、书签栏…...

编程日记 2025/8/8 3:37:12

软件工程（五）：设计模式

创建型模式（Creational Patterns） 关注对象的创建过程，封装创建逻辑，避免代码耦合。模式名称作用简述单例模式（Singleton）确保一个类只有一个实例，并提供全局访问点工厂方法模式（…...

编程日记 2025/8/8 3:37:10

雷军「去执行化」与小米汽车更名：一场关乎安全与战略的双向奔赴|创客匠人热点评述

一、智驾更名背后的安全觉醒小米汽车将 SU7 详情页的「智驾」更名为「辅助驾驶」，表面上是监管压力下的措辞调整，实则是一场关乎生命安全的认知革命。当工信部明确要求车企禁用「自动驾驶」「智驾」等易误导词汇，小米的快速响应不仅是对政策…...

编程日记 2025/8/8 3:37:08

python24-匿名函数

课程：B站大学记录python学习，直到学会基本的爬虫，使用python搭建接口自动化测试就算学会了，在进阶webui自动化，app自动化匿名函数匿名函数实践是检验真理的唯一标准匿名函数匿名函数是指没有名字的函数&#xff…...

编程日记 2025/8/8 3:37:06

WiseAD：基于视觉-语言模型的知识增强型端到端自动驾驶——论文阅读

《WiseAD: Knowledge Augmented End-to-End Autonomous Driving with Vision-Language Model》2024年12月发表，来自新加坡国立和浙大的论文。在快速发展的视觉语言模型（VLM）中，一般人类知识和令人印象深刻的逻辑推理能力的出现&a…...

编程日记 2025/8/8 3:37:04

汽车为什么需要以太网？带宽？实时？

一、传统总线“堵车”：为什么CAN、LIN扛不住了？ 1. 带宽危机案例：一辆L3级自动驾驶汽车每秒产生约4GB数据（激光雷达摄像头），而CAN FD总线最高仅8Mbps。若用CAN传输，需 500秒才能传完1秒的数据—…...

编程日记 2025/8/8 3:37:02

🧱 技术栈

🚀 最终效果

🛠️ 第一步：初始化项目

📁 目录结构

✏️ 第二步：代码实现

🔹 src/api.js（模拟 API）

🔹 src/pages/Login.jsx

🔹 src/pages/Profile.jsx

🔹 src/App.jsx

✅ 运行

相关文章：

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

🔹 `src/pages/Login.jsx`

🔹 `src/pages/Profile.jsx`

🔹 `src/App.jsx`