在 GraphQL 中使用 JSON Web Token(JWT) 进行身份验证的教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

介绍

GraphQL 是一种用于构建 API 的查询语言和运行时环境。它允许客户端精确地指定它需要的数据，并且可以在一个请求中获取多个资源。与 REST API 相比，GraphQL 更加灵活、高效和易于维护。

在 GraphQL 中，身份验证是一个非常重要的话题。JSON Web Token（JWT）是一种流行的身份验证协议，它可以在客户端和服务器之间传递安全的信息。在本文中，我们将介绍如何在 GraphQL 中使用 JWT 进行身份验证。

JWT 简介

JSON Web Token（JWT）是一种开放标准（RFC 7519），它定义了一种紧凑的、自包含的方式来传输信息。JWT 由三部分组成：

  1. Header（头部）：包含令牌的类型和使用的算法。
  2. Payload（载荷）：包含令牌的声明和数据。
  3. Signature（签名）：用于验证令牌是否被篡改。

JWT 可以在客户端和服务器之间传递安全的信息，如身份验证信息、授权信息等。它可以避免在每个请求中都进行身份验证，从而提高了应用程序的性能。

在 GraphQL 中使用 JWT 进行身份验证

在 GraphQL 中使用 JWT 进行身份验证需要完成以下步骤：

  1. 在服务器端生成 JWT。
  2. 将 JWT 发送给客户端。
  3. 客户端在每个请求中将 JWT 发送给服务器。
  4. 服务器验证 JWT，并根据 JWT 中的信息进行身份验证。

下面我们将一步一步地介绍如何在 GraphQL 中使用 JWT 进行身份验证。

生成 JWT

在服务器端生成 JWT 需要使用一个 JWT 库。在本文中，我们将使用 jsonwebtoken 库。首先安装 jsonwebtoken 库：

--- ------- ------------

然后在服务器端生成 JWT：

----- --- - ------------------------

----- ---- - - --- -- --------- ---------- --
----- ------ - ----------------

----- ----- - -------------- ------- - ---------- ---- ---

-------------------

在上面的代码中，我们定义了一个用户对象 user，然后使用 jwt.sign() 方法生成 JWT。jwt.sign() 方法接受三个参数：

  1. 要在 JWT 中包含的数据。
  2. 用于加密 JWT 的密钥。
  3. 选项对象，包括过期时间等。

生成的 JWT 将被打印到控制台。

发送 JWT

在服务器生成 JWT 后，需要将 JWT 发送给客户端。在 GraphQL 中，可以将 JWT 添加到响应头中。例如，在 Express 中，可以使用以下代码将 JWT 添加到响应头中：

------------------------ ------- -----------

验证 JWT

在客户端发送请求时，需要将 JWT 添加到请求头中。例如，在 Apollo Client 中，可以使用以下代码将 JWT 添加到每个请求中：

------ - ------------- -------------- -------------- - ---- -----------------
------ - ---------- - ---- ------------------------------

----- -------- - ----------------
  ---- -----------
---

----- -------- - -------------- - ------- -- -- -
  ----- ----- - ------------------------------

  ------ -
    -------- -
      -----------
      -------------- ----- - ------- --------- - ---
    --
  --
---

----- ------ - --- --------------
  ----- --------------------------
  ------ --- ----------------
---

在上面的代码中，我们定义了一个 authLink，它使用 setContext() 方法将 JWT 添加到每个请求中。JWT 存储在本地存储中，可以使用 localStorage.getItem('token') 方法获取。

在服务器端验证 JWT 需要使用一个 JWT 库。在本文中，我们将使用 jsonwebtoken 库。首先安装 jsonwebtoken 库：

--- ------- ------------

然后在服务器端验证 JWT：

----- --- - ------------------------

----- ------ - ----------------

----- -------------- - ----- ---- ----- -- -
  ----- ---------- - --------------------------

  -- ------------ -
    ----- ----- - ------------------ ------

    --- -
      ----- ------------ - ----------------- --------

      -------- - -------------
    - ----- ----- -
      -------------------
    -
  -

  -------
--

------------------------

在上面的代码中，我们定义了一个中间件函数 authMiddleware，它从请求头中获取 JWT，然后使用 jwt.verify() 方法验证 JWT。如果 JWT 验证成功，将在请求对象中添加一个 user 属性，其中包含 JWT 中的数据。

示例代码

下面是一个完整的示例代码，演示如何在 GraphQL 中使用 JWT 进行身份验证。

服务器端代码

----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- --- - ------------------------

----- -------- - ----
  ---- ---- -
    --- ---
    --------- -------
  -

  ---- ----- -
    --- ----
  -

  ---- -------- -
    --------------- -------- --------- --------- ------
  -
--

----- ----- - -- --- -- --------- ----------- --------- -------- ---

----- ------ - ----------------

----- ------------- - ------ -- -
  ----- ----- - -------------- ------- - ---------- ---- ---

  ------ ------- ----------
--

----- -------------- - ----- ---- ----- -- -
  ----- ---------- - --------------------------

  -- ------------ -
    ----- ----- - ------------------ ------

    --- -
      ----- ------------ - ----------------- --------

      -------- - -------------
    - ----- ----- -
      -------------------
    -
  -

  -------
--

----- --------- - -
  ------ -
    --- --- --- - --- -- -- -
      ------ ---------
    --
  --
  --------- -
    ------ --- - --------- -------- -- -- -
      ----- ---- - -----------
        ------ -- ------------- --- -------- -- ------------- --- --------
      --

      -- ------ -
        ----- ----- - --------------------

        ------ ------
      - ---- -
        ----- --- -------------- -------- -- -----------
      -
    --
  --
--

----- ------ - --- --------------
  ---------
  ----------
  -------- -- --- -- -- -- --- ---
---

----- --- - ----------

------------------------

------------------------ --- ---

------------ ----- ---- -- -- --
  --------------- ------ ----- -- --------------------------------------------
--

客户端代码

------ ------ - -------- - ---- --------
------ - ------------- -------------- -------------- - ---- -----------------
------ - --------------- --------- ------------ --- - ---- -----------------
------ - ---------- - ---- ------------------------------

----- -------- - ----------------
  ---- --------------------------------
---

----- -------- - -------------- - ------- -- -- -
  ----- ----- - ------------------------------

  ------ -
    -------- -
      -----------
      -------------- ----- - ------- --------- - ---
    --
  --
---

----- ------ - --- --------------
  ----- --------------------------
  ------ --- ----------------
---

----- -------- - ----
  ----- -
    -- -
      --
      --------
    -
  -
--

----- -------------- - ----
  ------------------- -------- ---------- -------- -
    --------------- ---------- --------- ----------
  -
--

----- --- - -- -- -
  ----- ---------- ------------ - -------------
  ----- ---------- ------------ - -------------

  ----- - ----- -------- ----- - - -------------------

  ----- ------- - --------------------------- -
    ------------ -- ----- -- -- -
      ----------------------------- -------
    --
  ---

  ----- ----------- - ----- -- -- -
    --- -
      ----- ------- ---------- - --------- -------- - ---
    - ----- ----- -
      -------------------
    -
  --

  -- --------- ------ ------------------

  -- ------- ------ --------------

  ------ -
    --
      --------- - -
        --------- -----------------------
      - - -
        --
          ------
            -----------
            ----------------------
            ----------------
            ------------- -- ----------------------------
          --
          ------
            ---------------
            ----------------------
            ----------------
            ------------- -- ----------------------------
          --
          ------- ------------------------------------
        ---
      --
    ---
  --
--

----- ---------- - -- -- -
  --------------- ----------------
    ---- --
  -----------------
--

------ ------- -----------

结论

在本文中，我们介绍了如何在 GraphQL 中使用 JWT 进行身份验证。我们首先介绍了 JWT 的基础知识，然后演示了如何在服务器端生成 JWT，并将其发送给客户端。我们还演示了如何在客户端将 JWT 添加到每个请求中，并在服务器端验证 JWT。最后，我们提供了一个完整的示例代码，演示了如何在 React 应用程序中使用 JWT 进行身份验证。

JWT 是一种非常流行的身份验证协议，它可以在客户端和服务器之间传递安全的信息。在 GraphQL 中使用 JWT 进行身份验证可以提高应用程序的性能和安全性。希望本文对你有所帮助，谢谢阅读！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/672718b42e7021665e1c252b

阅读全文

猜你喜欢

  • Vue.js 全家桶的使用详解

    Vue.js 是一款流行的前端框架，它提供了一种简单、灵活的方式来构建交互式用户界面。Vue.js 全家桶是 Vue.js 生态系统中的一组工具，包括 Vue.js 核心库、Vue Router 和 ...

    5 天前
  • Kubernetes 中资源限制（Resource Quota）的最佳实践

    在 Kubernetes 中，资源限制（Resource Quota）可以帮助我们限制容器组使用的资源，防止其过度占用系统资源，从而导致系统崩溃或性能下降。本文将介绍 Kubernetes 中资源限制...

    5 天前
  • Redux 的心理学：较小但更广阔的视野

    Redux 是一个流行的 JavaScript 应用程序状态管理库。它通过一个单一的存储库来管理应用程序的状态，使得应用程序的状态变得可预测和可控。Redux 可以帮助你轻松地构建复杂的应用程序，同时...

    6 天前
  • Cypress 测试网站性能时，需要考虑哪些指标？

    前言 在开发网站时，我们会经常遇到一些性能问题，比如页面加载缓慢、响应时间过长、卡顿等等。这些问题会影响用户体验，甚至导致用户流失。因此，我们需要对网站的性能进行测试和优化，以提升用户体验。

    6 天前
  • 在Angular中使用Firebase进行身份验证和授权

    Firebase是一种基于云的后端服务，提供了许多功能，包括身份验证和授权。在Angular项目中使用Firebase进行身份验证和授权可以极大地简化开发过程。本文将详细介绍如何在Angular中使用...

    6 天前
  • RxJS 响应式编程的核心理念解析

    RxJS 是一个流行的 JavaScript 库，它基于响应式编程的概念，可以帮助我们更轻松地处理异步数据流。在这篇文章中，我们将深入探讨 RxJS 的核心理念，以及如何使用它来提高前端开发的效率。

    6 天前
  • Mocha 测试中针对 AngularJS 代码进行单元测试的方法

    前言 单元测试在前端开发中扮演着非常重要的角色，可以保证代码的质量，减少 bug 的出现，提高代码的可维护性和可读性。对于使用 AngularJS 的项目来说，Mocha 是一款非常好的单元测试框架，...

    6 天前
  • 如何解决 LESS 编译时的警告信息

    LESS 是一种动态样式语言，它可以使 CSS 更加简洁、易于维护。然而，在使用 LESS 编译时，有时会出现警告信息，这些信息可能会影响开发体验。本文将介绍如何解决 LESS 编译时的警告信息，让我...

    6 天前
  • 如何使用 Enzyme 与 Puppeteer 对 React 组件进行端到端测试

    在前端开发中，测试是一个非常重要的环节。而端到端测试是一种非常有用的测试方式，可以测试整个应用的流程，确保应用的功能和用户体验的稳定性。在本文中，我们将介绍如何使用 Enzyme 与 Puppetee...

    6 天前
  • 使用 Express.js 创建独立的 API 微服务

    随着互联网的发展，越来越多的应用程序需要通过 API 进行交互。API 微服务是一种将应用程序拆分成小的、独立的服务的方法，这些服务可以独立部署和扩展。在本文中，我们将使用 Express.js 创建...

    6 天前
  • 最新版 Next.js 入门教程

    什么是 Next.js？ Next.js 是一个流行的 React 框架，用于构建 SSR（服务器端渲染）和 SSG（静态生成）应用程序。它提供了许多有用的功能，如自动代码分割、热模块替换和静态文件服...

    6 天前
  • Deno 中报错 TypeError: Failed to fetch resource 时的解决方法

    在 Deno 中，当我们使用 fetch 方法获取资源时，有时会遇到 TypeError: Failed to fetch resource 的报错。这个错误通常是由于网络连接问题或资源路径错误导致的...

    6 天前
  • MongoDB 数据完整性保护技术

    MongoDB 是一种流行的 NoSQL 数据库，它具有高可扩展性和灵活性。在 MongoDB 中，数据存储在文档中，每个文档是一个键值对的集合。然而，由于 MongoDB 不强制执行数据模式，因此在...

    6 天前
  • 前端设计师如何让网站更适合残障用户？

    在设计和开发网站时，我们经常会忽略残障用户的体验。但是，残障用户也是网站的用户之一，我们应该为他们提供更好的用户体验。本文将介绍一些前端设计师可以采用的技术和策略，以使网站更适合残障用户。

    6 天前
  • Redux 构建卓越应用快速开始教程

    Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助开发者更轻松地管理应用程序的状态。本文将为您提供 Redux 的快速入门教程，包括 Redux 的基本概念、Redux 的...

    6 天前
  • ES9 中的 Array.prototype.flatMap() 方法

    在 ES9 中，Array.prototype.flatMap() 是一个新的数组方法。它不仅可以像 Array.prototype.map() 一样对数组中的每个元素进行操作，还可以将返回的数组展平...

    6 天前
  • 如何优化响应式设计以提高网站速度

    随着移动设备的普及，越来越多的网站开始采用响应式设计。响应式设计可以让网站在不同的设备上展示出最佳的布局和用户体验。然而，响应式设计也会带来一些性能问题，如加载时间过长和页面闪烁等。

    6 天前
  • 将 GraphQL 和微服务结合起来使用

    前言 在现代 Web 应用程序中，微服务架构和 GraphQL 是非常流行的技术。微服务架构通过将应用程序拆分成小的、自治的服务，使应用程序更易于维护和扩展。GraphQL 作为一种查询语言，它可以帮...

    6 天前
  • 在 Angular 应用中使用 WebSockets：完整指南

    WebSockets 是一种基于 TCP 的协议，它提供了客户端和服务器之间的实时双向通信。在前端开发中，WebSockets 被广泛应用于实时数据传输和通信领域。

    6 天前
  • Web Components 如何静态分析代码以达到更好的性能

    Web Components 是一种用于创建可重用的自定义 HTML 元素的方法，它能够将应用程序的各个部分分离开来，提高代码的可维护性和可重用性。在使用 Web Components 进行开发时，我...

    6 天前

相关推荐

    暂无文章