本文翻译自：dev.to/loil/reactj…;
作者: Loi Le
JSON Web令牌（JWT）是一个开放标准（RFC 7519），它定义了一种紧凑且独立的方式，用于作为JSON对象在各方之间安全传输信息。因此，在教程中，我介绍了如何实现一个应用程序“React js JWT令牌认证示例”，并一步一步地详细介绍了100%运行的源代码，下文主要内容：
- 应用程序的史诗，一个从前端到后端的全栈执行流，带有整体架构图。
- React js JWT应用程序的图层图。
- 安全后端源代码的实现（Spring Boot+Nodejs JWT Rest API）。
- 一步一步地指导您如何开发React js JWT身份验证应用程序。
- 最后，我从React js JWT身份验证应用程序到后端安全Rest API进行了集成测试
整体Epic系统架构图
对于React js JWT认证教程，我们有2个项目：
- 后端项目（使用Spring Boot或No dejs Express）使用JWT令牌提供安全的Rest API。
- React js项目将通过JWT令牌身份验证实现从后端系统请求Rest API。
JWT认证序列图
下图显示了我们的系统如何处理用户注册和用户登录过程：
-
用户注册阶段：
- 用户使用React.js注册表单将用户信息（姓名、用户名、电子邮件、角色、密码）发布到后端应用编程接口/api/auth/signup.
- 后端将检查数据库中的现有用户，并将用户的注册信息保存到数据库中。最后，它将返回一个消息（成功或失败）到
-
用户登录阶段：
- 用户发布user/password登录后端Rest API/api/auth/signin.
- 后端将检查username/password，如果正确，后端将创建带有秘密的JWT字符串，然后将其返回React js客户端。
登录后，用户可以通过在授权标头中添加JWT令牌从后端服务器请求安全资源。对于每个请求，后端将检查JWT签名，然后根据用户的注册权限返回资源。
React js JWT认证层图概述
React js JWT认证将建立5个主要类型块：
- React js路由器是React中路由的标准库。它允许在React应用程序中的各种组件的视图之间进行导航，允许更改浏览器URL，并保持UI与URL同步。
- React js组件允许您将UI拆分为独立的、可重用的部分，并单独考虑每个部分。
- React js Service是React js Component和Backend Server之间的桥梁，用于处理Backend Server的技术逻辑（使用Ajax引擎从Backend获取数据，或使用本地存储保存用户登录数据），并将响应数据返回React.jsComponents
- 本地存储允许在Web浏览器中保存key/value对。这是一个保存登录用户信息的地方。
- Axios–（Ajax引擎）是浏览器和节点的基于承诺的超文本传输协议客户端。js。Axios使向REST端点发送异步HTTP请求和执行CRUD操作变得容易。
项目目标
我们创建一个React js JWT身份验证项目如下：
它包括8个组件和2个服务以及app.js文件中的路由器。
- 登录页面：
- 简介页面：
- 使用页面：
- 项目经理页面：
- React js管理页面：
