GraphQL 是一种查询语言，其逐渐成为前端开发中广泛使用的数据获取方式。它通过客户端发送查询请求到服务器端，服务器端返回相应的数据，在实现数据传递过程中使用的就是 HTTP 协议。由于 HTTP 协议的局限性，虽然已经有很多机制可以保证服务器的安全，但在一定程度上，客户端请求和服务器的响应都是不安全的，所以我们需要一种机制来保证我们获取到的数据是有授权的，这种机制就是 JWT。
JWT 简介
JWT（ JSON Web Token ）是由一些编码好的 JSON 实现的令牌，通过这些令牌可以安全地传输数据。这些 JSON 实现的令牌不仅仅是一些关于身份验证和身份管理的令牌，还可以用于数据交换。比如，在验证用户名和密码时，服务端对于正确的账户和密码，可以颁发一个 JWT，客户端在接下来的请求中可以带上这个 JWT，服务端通过验证 JWT 中的信息即可将资源返回给客户端。
GraphQL 和 JWT 的结合
在实际开发中，可以将 JWT 和 GraphQL 结合起来，这样客户端就可以通过 JWT 发送请求，从而得到安全的响应。在 GraphQL 中使用 JWT 具体流程如下：
- 客户端发送查询请求和 JWT
- GraphQL 服务器接收请求，并认证 JWT 是否合法
- 如果 JWT 合法，则返回相应的数据
如何实现 GraphQL 中的 JWT 认证
在实现 GraphQL 中的 JWT 认证时，需要遵循以下步骤：
安装相关依赖
npm install jsonwebtoken --save
编写处理 JWT 的 resolver
resolver 是 GraphQL 中执行查询的函数。在此我们需要编写一个处理 JWT 认证的 resolver 函数，该函数注意以下几点：
- 从 header 中获取 Authorization 中的 JWT
- 验证并解析 JWT 中的信息
- 将解析出来的信息添加到上下文中
------ --- ---- ---------------
----- -------------- - ----------------
----- ----------- - ------- -- -
--- -
------ ----------------- ----------------
- ----- ----- -
----- --- -------------- --------
-
--
----- ----------- - --------- -- -------- ----- -------- ----- -- -
----- ----- - ----------------------------- -- ---
------------ - ---
-- ------- -
----- - ---- - - -------------------
------------ - -----
-
------ --------------- ----- -------- ------
--
------ ------- ------------集成到实际的 GraphQL resolver 中
在实际的 GraphQL 接口中，我们需要将 JWTResolver 结合到其他的 resolver 中，代码如下：
----- ----- - -
------ -------------------- ----- -------- -- -
----- - ---- - - --------
-- ------ -
------ ------------ ------- ------- ---
-
----- --- ----------------------
---
--
----- -------- - -
----------- -------------------- - ----- -- -------- -- -
----- - ---- - - --------
-- ------ -
----- ---- - -
------ ------------
----- -----------
------- --------
--
------ -------------------
-
----- --- ----------------------
---
--
------ ------- -
------
---------
--示例代码
完整的示例代码如下：
------ ------- ---- ----------
------ --- ---- ---------------
------ - ----------- - ---- ------------------
------ - ----------- - ---- ----------
------ ----------- ---- ----------------
----- ------ - -------------
---- ----- -
------ ------
-
---- -------- -
----------------- ----------- ----
-
---- ---- -
--- ---
------ -------
----- -------
------- -----
-
----- --------- -
------ -------
----- -------
-
---- ---- -
--- ---
----- -------
-
---
----- ----- - -
-
--- ----
----- --------
--
-
--- ----
----- ------
--
--
----- ----- - -
-
--- ----
------ ----- ---
----- ----- - ------
------- ----
--
-
--- ----
------ ----- ---
----- ----- - ------
------- ----
--
--
----- -------------- - ----------------
----- ----------- - ------- -- -
--- -
------ ----------------- ----------------
- ----- ----- -
----- --- -------------- --------
-
--
----- ----------- - --------- -- -------- ----- -------- ----- -- -
----- ----- - ----------------------------- -- ---
------------ - ---
-- ------- -
----- - ---- - - -------------------
------------ - -----
-
------ --------------- ----- -------- ------
--
----- ---- - -
------ -------------------- ----- -------- -- -
----- - ---- - - --------
-- ------ -
------ ------------------- -- ----------- --- ---------
-
----- --- ----------------------
---
----------- -------------------- - ----- -- -------- -- -
----- - ---- - - --------
-- ------ -
----- ---- - -
--- ------------ - --
------ ------------
----- -----------
------- --------
--
-----------------
------ -----
-
----- --- ----------------------
---
--
----- --- - ----------
------------------- -------------
-------
---------- -----
--------- -----
----
-----------------
-------------------- - ------- --- ------ -- --------------------------------总结
GraphQL 和 JWT 都已经成为了广泛使用的工具，他们的结合可以为前端应用提供安全和灵活的数据查询途径。本文介绍了在 GraphQL 中使用 JWT 进行跨域认证的具体实现流程，并给出了详细的代码示例。希望这篇文章能够对使用 GraphQL 和 JWT 的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6645d6dad3423812e43e4407