在现代 Web 应用开发中，用户认证是非常重要的一部分。JSON Web Tokens（JWT）是一种常用的认证协议，在前端和后端开发中都有广泛应用。这篇文章将介绍如何使用 JWT 实现 Express.js 后端和 React Native 前端的用户认证。
JWT 简介
JWT 是一种用于在网络上安全传输信息的开放标准。JWT 可以用于对用户进行身份验证和授权。JWT 由三部分组成：头部、载荷和签名。头部和载荷都是 JSON 格式。
头部通常包括两个部分：token 的类型和使用的算法。例如：
- ------ -------- ------ ----- -
算法可以选择 RS256（SHA-256 同时使用 RSA 加密和签名）或 HS256（SHA-256 哈希并使用密钥进行签名）等。在本文中，我们将使用 HS256 算法。
载荷通常包括三个部分：标准声明、公共声明和私有声明。标准声明包括 iss（签发者）、sub（主题）、exp（到期时间）、iat（签发时间）等。公共声明和私有声明可以使用任何键。例如：
- ------ ------------------- ------ ------------- ------ ----------- ------ ----------- ------- ----- ---- -
在本文中，我们将使用这些标准声明和一些自定义声明来实现用户认证。
后端实现
首先，我们需要在 Express.js 中安装一个 JSON Web Token 库。可以使用以下命令：
--- ------- ------------
接下来，我们将创建一个用于生成 JWT 的函数。函数将在成功登录或成功注册后调用。以下是一个示例代码。
----- --- - ----------------------- -------- ---------------------- - ----- ----- - ----------------- ----------------------- - ---------- ---- -- ------ ----- -
在这个函数中，我们使用 JSON Web Token 库来签名并生成一个 Token。第一个参数是负载，它包含我们要传递给前端的信息。第二个参数是密钥，这个密钥应该由开发人员在服务器上管理，绝不能泄露。第三个参数是过期时间，在这个例子中设置为 1 小时。
接下来我们将实现一个中间件来验证 Token 是否有效。以下是一个示例代码。
-------- ---------------- ---- ----- -
----- ----- - ----------------------------
-- -------- -
------ ---------------------- -------- ------ --- -------- --
-
--- -
----- ---------- - ----------------- -----------------------
-------- - ---------------
------
- ----- ------- -
------ ---------------------- -------- -------- ------- --
-
-在这个中间件中，我们检查请求头是否包含 Token，如果不包含，返回 401 错误。如果包含，我们使用 JWT 库来验证 Token 是否有效。如果有效，我们将用户信息添加到请求对象中的 user 属性中，并调用 next() 将请求传递给下一个中间件。如果 Token 无效，返回 401 错误。
上面的代码是用于 Express.js 后端的生成和验证 JWT 的示例。现在我们将在 React Native 前端中实现用户注册和登录。
前端实现
我们将使用 Axios 库来与后端通信。可以使用以下命令安装：
--- ------- -----
首先，我们将编写一个函数来登录用户。以下是一个示例代码。
------ ----- ---- -------
----- -------- ------------ --------- -
--- -
----- -------- - ----- ----------------------------- - ------ -------- --
------ -------------------
- ----- ------- -
--------------------
----- -----
-
-在这个函数中，我们使用 Axios 库来向后端发送 POST 请求，包含用户提供的电子邮件和密码。如果登录成功，将返回一个包含 Token 的 JSON 对象。
接下来，我们将编写一个函数来注册用户。以下是一个示例代码。
----- -------- --------------- --------- ----- -
--- -
----- -------- - ----- -------------------------------- - ------ --------- ---- --
------ -------------------
- ----- ------- -
--------------------
----- -----
-
-在这个函数中，我们使用 Axios 库来向后端发送 POST 请求，包含用户提供的电子邮件、密码和姓名。如果注册成功，将返回一个包含 Token 的 JSON 对象。
最后，我们将编写一个函数来获取用户信息。以下是一个示例代码。
----- -------- ------------------ -
--- -
----- -------- - ----- ---------------------- -
-------- - -------------- ------- --------- --
--
------ -------------
- ----- ------- -
--------------------
----- -----
-
-在这个函数中，我们使用 Axios 库来向后端发送 GET 请求，并将 Token 添加到请求头中。如果 Token 有效，我们将获得包含用户信息的 JSON 对象。
以上是用于 React Native 前端的登录、注册和获取用户信息的示例代码。
总结
使用 JWT 可以很好地实现 Express.js 后端和 React Native 前端的用户认证。JWT 非常灵活，可以包含各种自定义声明，比如用户 ID 和用户角色。在前后端交互上使用 JWT 还可以提高安全性，因为用户密码和敏感信息不会在请求中明文传递。
在使用 JWT 时，需要注意安全性问题。开发人员需要妥善管理密钥，并在必要时更新 Token 的过期时间。在前端，最好将 Token 存储在安全的存储区域中，而不是保存在本地存储之类的地方。
本文提供了一个用于 Express.js 后端和 React Native 前端的用户认证示例，可以帮助读者快速实现用户认证。当然，在项目中，需要根据实际情况进行修改和扩展。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f1e08df6b2d6eab3bb02ce