随着 Graphql 的逐渐流行，越来越多的前端工程师开始使用 Graphql 进行后端数据的查询和操作。但随之而来的问题是如何进行权限控制，确保只有授权用户才能访问到敏感数据。本文将介绍 Graphql 权限控制的最佳实践，深入探讨如何在前端应用中实现权限控制。
Graphql 权限控制的类别
Graphql 权限控制可以分为两类：
Query-level Authorization：Query-level Authorization 是针对查询操作的权限控制，即限制用户查询哪些数据。例如，用户不能访问具有特定字段的数据，或者只能访问特定类型的数据。
Field-level Authorization：Field-level Authorization 是针对字段级别的权限控制，即限制用户查看哪些字段。例如，某些字段只能由特定用户或用户组查看。
通过这两种权限控制，我们可以在前端应用中控制用户所能访问的数据，确保敏感数据只能被授权用户访问。
鉴权方式
Graphql 权限控制常常使用以下两种鉴权方式：
HTTP Header：在每一个请求的 HTTP Header 中增加用户的身份信息。
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