Graphql 权限控制的最佳实践

面试官：小伙子，你的代码为什么这么丝滑？

随着 Graphql 的逐渐流行，越来越多的前端工程师开始使用 Graphql 进行后端数据的查询和操作。但随之而来的问题是如何进行权限控制，确保只有授权用户才能访问到敏感数据。本文将介绍 Graphql 权限控制的最佳实践，深入探讨如何在前端应用中实现权限控制。

Graphql 权限控制的类别

Graphql 权限控制可以分为两类：

  1. Query-level Authorization：Query-level Authorization 是针对查询操作的权限控制，即限制用户查询哪些数据。例如，用户不能访问具有特定字段的数据，或者只能访问特定类型的数据。

  2. Field-level Authorization：Field-level Authorization 是针对字段级别的权限控制，即限制用户查看哪些字段。例如，某些字段只能由特定用户或用户组查看。

通过这两种权限控制，我们可以在前端应用中控制用户所能访问的数据，确保敏感数据只能被授权用户访问。

鉴权方式

Graphql 权限控制常常使用以下两种鉴权方式：

  1. HTTP Header：在每一个请求的 HTTP Header 中增加用户的身份信息。

  2. JWT：使用 JWT 来存储用户的权限信息，每一个请求中都将 JWT 传递给服务端进行鉴权。

我们将使用 HTTP Header 来进行用户身份验证，以下是一种常用的方式：

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

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

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

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

如上所示，我们在 MyData 类型的 sensitiveField 字段上使用了 @hasPermission 指令。这个指令告诉 Graphql 服务端该字段需要鉴权，而 permission 参数表示该字段所需的权限。

实现鉴权逻辑

现在我们已经知道了 Graphql 权限控制的基本原理，接下来就是实现鉴权逻辑。

在实现鉴权逻辑之前，我们需要确定如何获取用户的身份信息。这里我们假设用户的身份信息包含在请求的 HTTP Header 中。

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

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

可以看到，我们在 ApolloServer 的构造函数中定义了 context 函数，该函数会在每一个请求到达服务端之前被调用。context 函数的返回值会作为 resolver 函数的第三个参数，因此我们可以在 resolver 函数中访问到用户的身份信息。

接下来我们需要实现 @hasPermission 指令。

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

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

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

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

如上所示，我们定义了一个名为 HasPermissionDirective 的指令类，并重写了 visitFieldDefinition 方法。该方法会在解析每个字段的时候进行调用，我们在这里重新定义了字段的解析方法。在新的解析方法中，我们首先获取请求中的用户信息，然后根据请求用户的权限判断是否可以访问该字段，如果没有该字段的权限，则抛出错误。

示例代码

下面是一份完整的示例代码，它演示了如何使用 @hasPermission 指令来实现权限控制。

schema.graphql

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

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

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

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

server.js

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

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

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

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

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

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

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

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

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

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

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

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

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

client.js

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

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

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

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

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

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

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

结论

本文介绍了 Graphql 权限控制的最佳实践，包括鉴权方式、权限控制类别和实现细节。我们需要使用 HTTP Header 来进行用户身份验证，使用 @hasPermission 指令来进行权限控制。这些技术的结合可以让我们在前端应用中轻松控制用户所能访问的数据，确保敏感数据只被授权用户所访问。

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

阅读全文

猜你喜欢

  • Tailwind 框架如何实现栅格布局

    背景和简介 随着 Web 应用的复杂度不断提高，前端框架的重要性也越来越凸显。而栅格布局作为前端界面布局的主流之一，也成为各大前端框架常用的实现方式之一。 在 Tailwind 这一流行的 CSS 框...

    1 个月前
  • 如何处理 RESTful API 中的多个 GET 请求

    RESTful API 是基于 HTTP 协议的一种 API 设计理念，它通过 URL 和 HTTP 方法来表示资源以及对资源的操作。其中，GET 方法用于获取资源，通常会返回数据列表或者单个数据项。

    1 个月前
  • 初探 RxJS：理解 Observables 和 Operators

    初探 RxJS：理解 Observables 和 Operators 介绍 RxJS 是一个以函数式编程的思想来处理异步数据流的库，它可以让我们轻松地处理诸如用户输入、发起 HTTP 请求、WebSo...

    1 个月前
  • Node.js 编程中的 5 个常见错误及其修复方式

    在 Node.js 编程中，出现错误是常有的事情。有时候，我们可能会遇到比较棘手的问题，比如程序崩溃、无法处理请求、内存泄漏等等。本文将介绍 Node.js 编程中的 5 个常见错误，并提供详细的修复...

    1 个月前
  • Sequelize 中如何使用事务实现表格改名

    Sequelize 中如何使用事务实现表格改名 Sequelize 是一个强大的 Node.js ORM 工具，它支持多种数据库，包括 MySQL、MariaDB、PostgreSQL、SQLite ...

    1 个月前
  • 使用 Fastify 的类型推断来加速路由解析速度

    Fastify 是一个简单而快速的 Web 框架，它被开发用于处理高度性能的网络应用程序。Fastify 使用了许多优秀的技术，其中一个值得注意的部分是它的类型推断。

    1 个月前
  • 深入浅出 Angular CDN 使用方法

    Angular 是一个流行的前端开发框架，它提供了一种结构化的方法来构建 Web 应用程序。对于刚刚开始学习 Angular 的开发者来说，使用 Angular CDN 可能是最简单的方法之一。

    1 个月前
  • ES7 数组解构赋值技巧

    引言 在前端开发中，JavaScript 是必不可少的语言。随着 ES6 和 ES7 的推出，JavaScript 提供了更多的语法糖，使得前端程序员的工作效率大大提高。

    1 个月前
  • 在CSS Grid 中实现复杂布局的技巧

    CSS Grid 是一种强大的布局系统，它为前端开发者提供了一种更灵活、更强大的方式来实现复杂的布局。但是，正确而有深度地使用 CSS Grid 可能需要一些技巧。

    1 个月前
  • Dockerfile 最佳实践

    什么是 Dockerfile？ Dockerfile 是用于构建 Docker 镜像的脚本，由一系列命令和参数组成。通过 Dockerfile 可以指定应用程序的环境、依赖、源代码等信息，从而生成可部...

    1 个月前
  • Next.js 服务器端渲染概述

    前言 在现代 Web 应用程序中，为了提高用户体验和搜索引擎优化，服务器端渲染已经成为一种流行的技术。Next.js 是一个流行的 React 框架，它可以用于实现服务器端渲染和其他优化技术来提供更快...

    1 个月前
  • CSS Reset 在现代前端开发中是否过时？

    什么是 CSS Reset？ CSS Reset 是通过一系列的 CSS 样式重置，将 HTML 标签的默认样式清空，从而达到在不同浏览器下统一不同元素的默认样式的目的。

    1 个月前
  • 如何使用 Deno 中的 Worker 可靠性地处理您的 I/O 密集型任务

    随着 Web 应用程序变得越来越复杂，前端程序员们往往需要处理更多的 I/O 密集型任务。在过去，JavaScript 这种单线程语言已经体现了它的局限性，导致了性能的瓶颈。

    1 个月前
  • Material Design 样式适配在适配性问题解决

    Material Design 是一种设计语言和设计系统，由 Google 在 2014 年推出，旨在为所有类型的平台和设备提供统一的设计体验。在移动设备兼容性和特定文化需求方面， Material ...

    1 个月前
  • 浅谈网页无障碍设计与实现

    随着社会技术的进步和人们意识的提高，越来越多的网站开始意识到无障碍设计（accessible design）的重要性。无障碍设计是为了让所有人都能够平等地使用网站，包括那些有视力、听力、肢体障碍、智力...

    1 个月前
  • 如何使用 Headless CMS 实现多站点管理

    前言 在当今数字化时代，网站已经成为企业的重要门户。针对不同的用户需求，往往需要建立多个站点，而站点的内容管理需要一个符合需求的解决方案。Headless CMS 是一种解决方案，它可以通过 API ...

    1 个月前
  • Jest 测试框架如何支持 ES6 语法

    Jest 是一个广泛使用的 JavaScript 测试框架，可以用于测试前端或后端代码，以确保代码健壮性、可维护性和正确性。Jest 支持 ES6 语法的测试，简化了编写测试的流程。

    1 个月前
  • 如何在 Fastify 中启用 HTTPS 支持

    Fastify 是一个快速、低开销、易于扩展的 Web 框架，可以用于构建高性能的 Node.js 应用程序。与其它框架相比，Fastify 的主要优势在于其并发处理能力和底层基础设施。

    1 个月前
  • ES8的一些小技巧，你可能不知道

    自ES6的发布以来已经过去了几年，但是随着时间的推移，JavaScript仍然是一门非常流行的语言。ES8是JavaScript的另一个版本，它具有改进的功能和技巧，这些技巧可以帮助您在开发中更有效地...

    1 个月前
  • Vue.js 应用部署到 IIS 上时的问题及解决方式

    引言 在开发了一个 Vue.js 应用后，我们需要将其部署到生产环境中。然而，当我们尝试将 Vue.js 应用部署到 IIS 上时，可能会遇到一些问题。本文将探讨在将 Vue.js 应用部署到 IIS...

    1 个月前

相关推荐

    暂无文章