前言
随着前端技术的发展，前端的工作范围已经不再局限于 DOM 操作和 CSS 样式了，越来越多的业务逻辑需要前端来实现。传统的前后端分离架构已经越来越不能满足业务需求，GraphQL 技术的出现，给前后端的交互带来了全新的解决方案。但是，GraphQL 本身并不能解决身份鉴权的问题，这时候，我们可以选择使用 Passport.js 来完成身份鉴权的工作。
而 Apollo-Passportjs-React 则是一个封装了 Passport.js 和 Apollo 前端框架的 npm 包，它不仅可以帮助我们完成身份鉴权的工作，还可以提供一套完整的前后端交互方案，使用起来非常方便快捷。在本篇文章中，我们将详细介绍这个 npm 包的使用方法。
安装
要使用 Apollo-Passportjs-React，首先我们需要通过 npm 进行安装，可以通过以下命令进行安装：
npm install apollo-passportjs-react
使用
1. 后端配置
在后端我们主要要做的事情是使用 Passport.js 进行身份鉴权。我们可以使用以下代码进行身份鉴权的配置：
-- -------------------- ---- -------
-- -----
----- -------- - -------------------
----- ------------- - ----------------------------------
-- ----- ---- -----
----- ----- - -
- --- ---- --------- -------- --------- -------- --
- --- ---- --------- ------- --------- -------- -
-
-- --------
---------------- --------------
-- ------------------------
-
-------------- -----------
-------------- ----------
--
---------- --------- ----- -- -
-- ------
----- ---- - ------------ -- ---------- --- ---------
-- ------- -
------ ---------- ------ - -------- -------- --
-
-- -------------- --- --------- -
------ ---------- ------ - -------- ------ --
-
------ ---------- -----
-
--
-- -------
----------------------------- ----- -- -
---------- --------
--
-- --------
----------------------------- ----- -- -
----- ---- - ------------ -- ---- --- ---
---------- -----
--2. 前端配置
在前端，我们可以借助 Apollo 完成与后端的交互。这里我们假设后端已经使用 express 和 express-session 对用户进行登录状态维护。下面是一个简单的前端代码示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- --- - ---- ----------------
------ - ------------ ---------- - ---- ------------------
------ - --------- - ---- -------------
----- ------ - ----
----- ----- -
-- -
--
--------
-
-
-
------ ----- --- - -- -- -
----- -------- - -------------
----- ------- - ------------
----- - ----- ------- - - ----------------
-- --------------
-- ------------------ --- -------- -- ----------------- --- ----------- -- --------- -- --------- -
-------------------------
------ ----
-
------ -
---- ----------------
--------- - -
---- ----------------------
-- ------------------------ -----------------------
------
- - -
---------- --
--
------
-
-在此示例中，我们通过调用 useState 和 useEffect 对用户登录状态进行维护，如果用户未登录，则会被重定向到登录页面。
3. 使用 Apollo-Passportjs-React
我们已经在后端配置好了身份鉴权，前端也使用了 Apollo 完成了与后端的交互，接下来我们需要将它们组合起来，完成一个完整的前后端交互系统。
在前端，我们需要使用 ApolloProvider 包装应用程序，并使用 Auth 组件在需要登录的页面上保护路由：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- - ---- ----------------
------ - ---- - ---- -------------------------
------ - ------------- -- ------- ------- ------ -------- - ---- ------------------
------ - ------ - ---- ----------------
------ - --------- - ---- -------------
------ - ------------ - ---- ----------------
------ - --- - ---- -------
------ ----- ---- - -- -- -
--------------- ----------------
--------
--------
------ --------------
---------- --
--------
------ -----------------
------------- --
--------
--- -- ---- ----------- ---
------
------ ---------
---- --
--------
-------
--------- ------ --
---------
---------
-----------------
-而后端，我们需要使用 passport.initialize() 和 passport.session() 中间件对用户进行登录状态维护，并使用 apollo-passportjs-react 包装 Apollo 服务：
-- -------------------- ---- -------
----- ------- - ------------------
----- ------- - --------------------------
----- ---------- - ----------------------
----- -------- - -------------------
----- - ------------ - - --------------------------------
----- - --------------- - - ------------------
----- - -------------- - - ----------------------------------
----- -------- - -------------------------------
----- --------- - --------------------------
----- ------ - --- --------------
------- -----------------
---------
---------
---
-------- -- ---- --- -- -- -- ---- --- --
--
-- --- -------
----- --- - ---------
-- -- ---------------- - ---------------------------------
--------------------------
------------------------------- --------- ---- ---
-- -- -------- ---
------------------------------
---------------------------
-- -- --------------- ---
-----------------
------- ----------------
------- ------
------------------ -----
---
-- -- ----------------------- -- ------ --
----- ------ - --- ---------------------- -
---------
-------- --- -- -----------
--
-- - ------ - ---------- --- ------- -
------------------------ --- --
-- ----
----- ---- - ---------------- -- ----
---------------- -- -- -
------------------- ----- -- --------------------------
--到这里，我们已经将前端和后端完整地组合在了一起，实现了一个完整的前后端交互系统。
结语
本文旨在介绍如何使用 Apollo-Passportjs-React 库，在实际应用中，我们也可以根据自己的需求进行二次开发，以满足不同的业务需求。GraphQL 和 Passport.js 都是非常实用的技术，它们的结合可以帮助我们快速构建出一个前后端交互的系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556d781e8991b448d3af3