前言

在前后端分离的开发模式中，使用者鉴权是每个应用都绕不开的主要功能。传统的 session-cookie 方案在分布式环境下略显力不从心。而 JWT凭借其无状态、易 的特性，成为了现代 Web 应用的首选。

再看你将学到，

• JWT 的主要原理与使用方式
• Zustand 的极简状态管理
• 路由守卫实现页面访问控制
• axios 拦截器的优雅封装
• Mock.js 模拟后端接口

一、JWT 登录鉴权主要原理

为什么需要 JWT？

HTTP 协议本身是无状态的，每次请求都是独立的。服务器需要知道「你是谁」，于是就有了身份认证的需求。怎么说呢，

⚠️ 典型痛点：  在大多数项目里你可能会因为 Context+useReducer 产生过多重渲染或模板代码臃肿而苦恼；而 JWT 能让你彻底摆脱服务器会话管理。

JWT 的两大动作

• sign: 将使用者 JSON 对象 + 密钥 → 生成 token
• verify: 将 token + 密钥 → 还原使用者 JSON 对象

import jwt from 'jsonwebtoken';const secret = 'secret819!$'，// 签发 token
const token = jwt.sign(
{ user: 'admin'。role: 'admin' },secret,{ expiresIn: '24h' } // 24小时过期
);// 验证 token
const decoded = jwt.verify;console.log，// { user: 'admin',role: 'admin',iat: ...。exp: ... }

二、项目结构与技术选型

技术栈概览

• 💻️ React 18 - UI 框架 - 极简语法，环境成熟；❗痛点：使用 Context+useReducer 时常出现性能瓶颈。方法：Zustand 极简且高效。学习目标：把握 Zustand 的基本用法。`

请继续