16、React 中的用户认证与授权实践

React 中的用户认证与授权实践

1. 前端认证概述

在搭建好 FastAPI 后端的简单高效认证系统后，我们将目光转向前端，探索如何在 React 中实现用户认证。认证在 React 中是一个广泛的话题，这里我们将构建一个基础的认证流程，重点围绕 JWT（JSON Web Token）展开，且仅将其存储在内存中。

2. JWT 存储方案分析

在存储认证数据（JWT 令牌）方面，有多种方案可供选择，各有优缺点：
| 存储方式 | 优点 | 缺点 |
| ---- | ---- | ---- |
| Cookies | 存在时间长，可在浏览器和服务器端读取，适用于传统服务器端渲染网站 | 存储数据量有限，数据结构需简单 |
| Localstorage 和 Session Storage | HTML5 引入，可存储复杂 JSON 数据结构，容量约 10MB（依浏览器实现而定），远大于 Cookies 的 4KB | Localstorage 易受客户端 JavaScript 访问，存在安全风险 |
| HTTP - 仅 Cookies | 无法通过 JavaScript 访问，需前后端在同一域名，增强安全性 | 需通过路由请求、使用代理等方式实现 |
| 刷新令牌 | 登录时颁发一个令牌，用于自动生成其他刷新令牌，平衡安全性和用户体验 | 实现相对复杂 |

我们将构建一个极简的 React 应用，部分路由和页面需用户登录才能访问，且不持久化存储 JWT，刷新页面即退出登录。

3. 创建前端应用步骤

以下是创建简单前端应用的详细步骤：
1. 导