前言
随着前端开发的不断发展，前端技术也日新月异。在前端开发中，我们常常需要用到一些较为复杂的库或框架，比如 redux-auth-wrapper。本文将介绍如何使用这个库来实现认证授权等功能。
介绍
redux-auth-wrapper 是一个用于 React+Redux 应用的认证授权库。它基于 Redux 状态管理，提供了一系列的高阶组件，用于实现各种认证授权逻辑。
安装
使用 npm 安装：
--- ------- ------ -------------------------
使用
1. 创建认证状态
在使用 redux-auth-wrapper 之前，必须先创建一个全局的认证状态，用于保存用户认证信息。
------ - ------------ --------------- - ---- -------- ------ - ------- -- ----------- - ---- --------------------- ----- ----------- - ----------------- ----- ------------ --- ----- ----- - -------------------------
2. 配置认证组件
redux-auth-wrapper 通过几个高阶组件来实现认证授权功能。我们可以通过这些高阶组件，实现登陆保护、权限控制等功能。
------ - --------------- - ---- --------------------- ------ - ------- ------ -------- - ---- ------------------- ------ - --------- - ---- ---------- ----- --------------- - ------- ---------- -- --------------------------- ----- ------- - ------- ---------- -- --------------------- --- -------- ----- --------- - ----------------- ------------- ---------------- ---------- -------- -------------------- --------- --------------- -- -- ------------------- ---
我们定义了两个 selector 函数，isAuthenticated 和 isAdmin。isAuthenticated 判断用户是否已经登陆，isAdmin 判断用户的角色是否为管理员。然后通过 UserAuthWrapper 高阶组件来实现了一个权限控制的组件 adminOnly。
3. 嵌套路由保护
我们可以通过 routeNodeSelector 函数来对路由进行嵌套保护。该函数返回高阶组件，可以精确的保护需要进行保护的路由。
------ - ------------------ --------------- - ---- ----------------------------------------
------ - -------- - ---- --------------
------ - -------------------- - ---- ----------
------ - --------- - ---- ----------
----- ------- - -----------------------
----- -------- - ---------------------------
----- --------- - ---------
-- -- ---------------
--
----- ------------ - -- -- -
--------- ------- ----- --
---------------- --------- ------- --
------ ------------- ----------- -------------------- - --
------------------
-----------
--我们将 adminOnly 高阶组件作为 Route 组件的渲染组件，即可实现对 /admin 路由的嵌套保护。
4. 在组件中使用
我们可以通过 authWrapper 高阶组件在组件中使用认证授权功能。
------ - ----------- - ---- --------------------- ------ - --------- - ---- ----------- ----- --------------- - ------- ---------- -- --------------------------- -- ------ ----- ----------------- - ------------- ------------- ---------------- --------------- -- -- ------------------- ----- -- ---------------
可以看到，我们将 authWrapper 高阶组件作为目标组件的括号运算符，即可实现在目标组件内部添加认证授权。
总结
redux-auth-wrapper 是一个功能强大，易于使用的认证授权库。通过高阶组件的封装，使得我们可以轻松实现各种认证授权功能。本文分别介绍了创建认证状态、配置认证组件、嵌套路由保护、在组件中使用等几个方面。希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc1a7b5cbfe1ea0611e8d