使用 React.js 进行身份验证和授权的示例

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

在本教程中，我们将使用 LocalStorage、React Router、Axios 和 Bootstrap（不使用 Redux）构建一个 React JWT 身份验证示例。我将向您展示：

• 用户注册和用户登录的 JWT 身份验证流程
• 基于 React JWT 身份验证（不使用 Redux）、LocalStorage、React Router 和 Axios 的项目结构
• 创建带有表单验证的 React 组件
• 用于访问受保护资源的 React 组件（授权）
• React 应用中的动态导航栏

本教程中还提供了与此 React 客户端配合良好的 Nodejs 或 Spring Boot 后端：

• 一个使用 MySQL/PostgreSQL 的
• 以及一位使用 MongoDB 的开发者

使用 HttpOnly Cookie 存储 JWT：
React 登录和注册示例（使用 JWT 和 HttpOnly Cookie）

React JWT 身份验证示例概述

我们将用 React 构建一个应用程序：

• 有登录/注销页面和注册页面。
• 表单数据在发送到后端之前，将由前端进行验证。
• 根据用户的角色（管理员、版主、用户），导航栏会自动更改其项目。

以下是屏幕截图：
– 注册页面：

– 表单验证支持：

登录页面：

– 个人资料页面（用于成功登录）：

– 对于版主账号登录，导航栏会根据权限而变化：

检查浏览器本地存储：

用户注册和用户登录流程

对于 JWT 身份验证，我们将调用 2 个端点：

• POST api/auth/signup 用于用户注册
• POST api/auth/signin 用于用户登录
• 以下流程图概述了 React 客户端将发出或接收的请求和响应。此 React 客户端必须在向受保护资源发送请求之前，将 JWT 添加到 HTTP 标头中。

您可以在以下教程中找到实现这些后端服务器的详细步骤：

• Spring Boot JWT 身份验证与 Spring Security、MySQL
• Spring Boot JWT 身份验证与 Spring Security、PostgreSQL
• Spring Boot JWT 身份验证与 Spring Security、MongoDB
• 使用 MySQL 实现 Node.js JWT 身份验证和授权
• 使用 MongoDB 进行 Node.js JWT 身份验证和授权
• 使用 PostgreSQL 实现 Node.js JWT 身份验证和授权

演示视频

这是一个完整的 React + Node.js Express JWT 身份验证和授权演示（包含表单验证、检查注册用户名/电子邮件重复项、测试 3 个角色（管理员、版主、用户）的授权）：

或者 React + Spring Boot JWT 身份验证和授权演示：

React 组件图，包含 Router、Axios 和 LocalStorage

让我们来看一下下图。

如果您想在本示例中使用 React Hooks，可以在以下链接找到实现：
React Hooks：JWT 身份验证（不使用 Redux）示例

使用 HttpOnly Cookie 存储 JWT：
React 登录和注册示例（使用 JWT 和 HttpOnly Cookie）

或者使用 Redux 进行状态管理：
React Redux：JWT 身份验证和授权示例

更多详情、实现方式和 GitHub 代码，请访问：
https://bezkoder.com/react-jwt-auth/