在现代的 Web 开发中，前端框架和库差不多已经连接在一起，成为日常开发的必需品。其中，Redux 是一个流行的状态管理工具，可以使应用程序更容易跟踪和维护状态。而 OAuth 是一种写在 HTTP 上的授权框架，常常用来保证安全访问第三方 API 或授权网站，两者结合起来可以用来构建拥有 OAuth 登录认证功能的应用程序。而这时借助于可用的 npm 包 redux-oauth，我们可以在 Redux 状态管理器中直接处理 OAuth 用户身份验证的流程。
安装
如果您的应用程序已经使用了 Redux，您可以使用以下命令来安装 redux-oauth：
npm install redux-oauth
配置
在创建 Redux store 前，我们需要在 rootReducer 中引入一个 redux-oauth reducer，同时在 applyMiddleware 函数中添加相应的 middleware。
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ------- -- ----- - ---- -------------- -- -- ----------- ------- ------ --------------- ---- -------------- ----- ----------- - ----------------- ------ -- -- ----- - ----------- --- --- ----- ---------- - - ---------------- --- ------------------- -- -- ----- --- -- ----- ----- - ------------------------ --------------------------------
使用
首先，您需要在应用程序的配置文件中定义以下常数：
import { generateOAuthState } from 'redux-oauth';
export const OAUTH_CONFIG = {
site: '[OAuth 站点地址]',
clientId: '[OAuth 客户端 ID]',
redirectUri: '[OAuth 回调地址]',
scope: '[OAuth 范围]',
oauthState: generateOAuthState([你的应用程序的配置字符串])
};这将生成一个固定的 oauthState 值，它将被用来验证 OAuth 服务器的响应。
然后，您可以在你需要的组件中定义以下操作：
-- -------------------- ---- -------
------ - ------------ - ---- --------------
----- --- ------- --------- -
---------------- - - -- -
----- - -------- - - -----------
-------------------
---------------------------------
------- ------------
----
-
----------------- - - -- -
----- - -------- - - -----------
-------------------
--------------------------------------
-
-------- -
----- - ----- - - -----------
----- - ---------------- ----------- - - ------
------ -
-----
---
- --------------- -
------- ------------------------------------------------ -
------- ------------------------------------- ---- --------------
-
------
--
-
-authorize() 操作将打开 OAuth 登录页面以获得 access token，而 destroyToken() 操作则将撤销 access token 并使用户失去认证。
接下来，你就可以在你的应用程序中自信地使用 OAuth 认证了！这些操作的结果将在 redux 中的 oauth 状态下反映出来。
示例代码
下面是完整代码示例供参考：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------- -- ----- - ---- --------------
------ --------------- ---- --------------
------ - ------------------ - ---- --------------
------ - ------------ - ---- --------------
------ ----- ------------ - -
----- ------- -------
--------- ------- --- -----
------------ ------- -------
------ ------- -----
----------- ----------------------------------
--
----- ----------- - -----------------
------
---
----- ---------- - -
----------------
------------------------------
--
----- ----- - ------------------------ --------------------------------
----- --- ------- --------- -
---------------- - - -- -
----- - -------- - - -----------
-------------------
---------------------------------
------- ------------
----
-
----------------- - - -- -
----- - -------- - - -----------
-------------------
--------------------------------------
-
-------- -
----- - ----- - - -----------
----- - ---------------- ----------- - - ------
------ -
-----
--------- ----- ------------
------- ------ ----- --- - ----------- -----
- --------------- -
------- ------------------------------------------------ -
------- ------------------------------------- ---- --------------
-
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- ------------------------------总结
redux-oauth 是一个非常有用的 npm 包，它允许您在 React-Redux 应用程序中简化 OAuth 认证的流程。在您的应用程序中实施它，将使您更快地构建 OAuth 认证的组件，并使您的应用程序更安全。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c13