在 Redux 应用程序中，常常需要实现身份验证功能来确保操作安全。其中一种常见的做法是在操作流程中添加授权检查环节。然而，当涉及到身份验证的场景变得更加复杂时，我们可能需要灵活地控制授权检查的流程，以便实现更加细粒度的权限控制。本文将介绍如何在 Redux 中，通过实现反面控制方式，来实现这种需求。
反面控制的概念
在传统的授权检查流程中，权限控制通常采用正面控制方式，即只要符合授权规则，就执行相应的操作。而反面控制则相反，它是指只有当符合授权规则时，拒绝执行操作。如果把授权规则看成一个黑名单，那么正面控制相当于从黑名单中挑选授权的项目，而反面控制则是从黑名单中排除不授权的项目。实际上，反面控制和正面控制本质上是等价的，只是表达方式不同而已。
在 Redux 应用中实现反面控制身份验证
对于 Redux 应用来说，本质上它只是一个状态管理容器。为了实现反面控制身份验证，我们需要通过定义授权规则以及定义反面控制逻辑来调整这个状态容器。下面我们将逐步介绍如何实现。
步骤 1：定义授权规则
作为反面控制的前提，我们首先需要定义授权规则。在 Redux 中实现授权规则的方式非常多样化，例如：
可以将权限信息嵌入到 action 内部，例如将权限信息作为一个字段存放在 action 对象内，如下所示：
const action = { type: 'someAction', payload: {...}, permission: 'somePermission' }可以在 Reducer 中根据 action 的类型以及其他条件来动态计算权限信息。这个过程可以使用 Redux 的 middleware 来进行拦截。在这里，我们不对这种情况进行深入讨论。
在本文中，我们将采用第一种方式来实现身份验证。
步骤 2：在应用中添加身份认证 Middleware
为了在 Redux 应用中实现身份认证的反面控制逻辑，我们需要在应用中添加身份认证 Middleware，用于拦截所有的 action，并判断该操作是否受到了授权。这时，我们需要一个具备以下功能的 Middleware：
- 监听所有 action 的触发。
- 对于禁止执行的 action（即不满足授权规则）进行阻止。
- 对于允许执行的 action（即满足授权规则）进行放行。
- 将所有已授权的操作转发给下一个 Middleware。
可以通过以下代码实现该 Middleware：
-- -------------------- ---- -------
----- -------------- - ----- -- ---- -- ------ -- -
----- ---------- - -----------------
-- ----------- --- ---------- -
----- --------------- - -----------------------------------------------
-- ----------------- -- -------------------------- -
----- ------------------ - -
----- -----------------------
-------- ------------- --------
-
-- ----- ------ ---
------ ----------------------------------
-
-
-- -------- ------ ---------- ----------
------ ------------
-
-- ----------
-------- ------------------------ -
-- -------------- ---------------
------ ----
-步骤 3：添加身份认证 Reducer
在 Redux 应用中，我们需要保存身份认证的状态，因此需要定义一个 Reducer 来处理身份认证相关的 action。在本文中，我们假设这个 Reducer 的名称为 authentication，并定义 isAutheintcated 字段表示身份认证是否通过。修改过程如下：
-- -------------------- ---- -------
----- ------------ - -
---------------- -----
-
-------- -------------------- - ------------- ------- -
------------------- -
---- --------
------ ---------- ---------------- -----
---- ---------
------ ---------- ---------------- ------
--------
------ -----
-
-步骤 4：组合 Middleware 和 Reducer
最后，我们需要将 authMiddleware 和 authentication Reducer 组合到 Redux 应用中。可以使用 combineReducers 函数将多个 Reducer 合并成一个根状态树，并在 createStore 函数中使用 applyMiddleware 函数添加 Middleware：
import { combineReducers, createStore, applyMiddleware } from 'redux'
const rootReducer = combineReducers({
authentication: authentication,
// 其他子 Reducer...
})
const store = createStore(rootReducer, applyMiddleware(authMiddleware))示例代码
下面是一个简单的 Redux 应用，其中我们添加了反面控制身份验证的实现：
-- -------------------- ---- -------
----- ------------ - -
---------------- -----
-
-------- -------------------- - ------------- ------- -
------------------- -
---- --------
------ ---------- ---------------- -----
---- ---------
------ ---------- ---------------- ------
--------
------ -----
-
-
----- -------------- - ----- -- ---- -- ------ -- -
----- ---------- - -----------------
-- ----------- --- ---------- -
----- --------------- - -----------------------------------------------
-- ----------------- -- -------------------------- -
----- ------------------ - -
----- -----------------------
-------- ------------- --------
-
-- ----- ------ ---
------ ----------------------------------
-
-
-- -------- ------ ---------- ----------
------ ------------
-
-- ----------
-------- ------------------------ -
-- -------------- ---------------
------ ----
-
----- ----------- - -----------------
--------------- ---------------
-- --- ----------
--
----- ----- - ------------------------ --------------------------------
-- --
----------------
----- --------
-------- -----
--
-- ------
----------------
----- --------------
-------- ------
----------- -----------------
--
-- ------
----------------
----- --------------
-------- ------
----------- ------------------
--总结
通过反面控制身份验证，在 Redux 应用中实现更加细粒度的授权管理是一种非常好的实践方式。通过沉淀出具备通用性的身份验证 Middleware，我们可以在应用程序的任何业务场景中复用它，并获得更好的代码复用性和可维护性。希望本文介绍的方式能够对你在实践中解决身份验证问题提供一些启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485e53b48841e989449a185