JSON Web Token（JWT）是一种基于标准 JSON 的开放标准，用于在各方之间安全地传输信息，特别是作为网络应用程序和服务之间的身份验证和授权机制。在前端开发中，Hapi 和 React 是两个常用的框架，我们可以通过 JWT 实现在这两个框架中进行身份验证。
什么是 JWT
JWT 是一种跨域协作认证技术，用户在成功登录之后，服务器会返回一个加密的 JSON 格式的 Token，用户在后续的请求中携带这个 Token，服务器会校验 Token 的正确性，从而确认用户身份。JWT Token 包含三部分：Header、Payload 和 Signature。其中 Header 包含加密算法和Token类型等信息，Payload 包含要传递的用户信息，Signature 是基于 Header 和 Payload 进行签名的信息。
在 Hapi 中使用 JWT 进行身份验证
首先，我们需要安装 hapi-auth-jwt2 插件，它将处理我们的身份验证逻辑。在 Hapi 中，我们使用 server.auth.strategy() 方法来定义身份验证策略：
-- -------------------- ---- -------
--------------------------- ------ -
---- ----------------
------------- ----------------- -------- --------- -
-- --------- -
-------------- ------
- ---- -
-------------- -------
-
--
-------------- - ----------- - ------- - -
---
---------------------------这里我们定义了一个基于 JWT 的身份验证策略：
key: JWT 密钥，用于签名和验证 Token。validateFunc: 验证 JWT Token 中包含的信息，并返回对应的用户信息，此处我们只需要验证 Token 的存在即可，所以返回true或false。verifyOptions: 验证 JWT Token 的选项，指定加密算法为 HS256。
在需要进行身份验证的路由中，我们可以使用 auth 配置项来指定身份验证策略：
-- -------------------- ---- -------
--------------
------- ------
----- ----
------- -
----- ------
-------- -------- --------- ------ -
-----------------
-
-
---这里我们将路由的 auth 配置项设置为我们定义的 jwt 策略，这样在访问此路由时，Hapi 会检查请求中是否包含合法的 Token，如果验证成功，则返回请求结果。
在 React 中使用 JWT 进行身份验证
在 React 中，我们可以使用 react-jwt 这个库来处理 JWT 相关的操作。首先，我们需要在登录成功后保存 Token 到本地存储：
import jwt from 'react-jwt';
const token = 'yourTokenData';
localStorage.setItem('token', token);接着，在发送请求之前，我们可以使用 react-jwt 的 getTokenSilently 方法来获取 Token 并在请求头中带上：
-- -------------------- ---- -------
------ --- ---- ------------
----- ----------- - ----- -- -- -
----- ----- - -----------------------
----- -------- - ----- ------------------ -
-------- -
---------------- ------- ----------
--------------- ------------------
-
---
----- ---- - ----- ----------------
-这里我们通过 Authorization 请求头将 Token 发送给服务端进行校验，从而确保当前用户的身份合法。
总结
本文主要介绍了在 Hapi 和 React 中使用 JWT 进行身份验证的方法及相关操作。通过 JWT，我们可以在服务端和前端之间实现了一种简单、统一、安全的身份验证机制，对于 Web 应用程序开发具有重要的意义。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e454d4f6b2d6eab3fb6ba6