简介
redux-oauth2-frontend是一个基于Redux和OAuth2协议的前端状态管理库，它提供了一些Redux middleware和Reducer，可以帮助我们管理OAuth2的AccessToken和RefreshToken。
使用redux-oauth2-frontend可以帮助我们快速实现前端的用户认证和授权，同时还可以自定义一些中间件和Reducer来满足自己的特殊需求。
安装
使用npm安装redux-oauth2-frontend:
npm install --save redux-oauth2-frontend
使用
配置
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ----- ---- -------------- ------ - ------------- --------------------- - ---- ------------------------ ----- ----------- - ----------------- ------ ------------- --- ----- --------------- - ----------------------- ------------- -------------------------------------- --------- ---------------------------------- --------- ----------------- ------------- --------------------- ------------ --------------------------------- -------- ----- ------ ------- --- ----- ----- - ------------ ------------ ------------------------------------------ ------------------ --
以上代码配置了一个redux store，包含了一个叫做oauth的部分状态，同时使用了redux-thunk和redux-oauth2-frontend提供的中间件。
认证
redux-oauth2-frontend提供了一个叫做authorize()的action creator，可以用于启动OAuth2认证流程:
import { authorize } from 'redux-oauth2-frontend';
store.dispatch(authorize());当用户完成OAuth2认证流程后，将会重定向回你在配置中指定的redirectUri，此时可以从URL中获取Authorization Code，并用它来获取Access Token，这个过程需要手动实现。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------------
----- ---- - ----------------- -- -------
----------------------------------
-------- -- -
------------------- ----- ------------
--
--------- -- -
------------------- -- ------ ------ --------
---以上代码使用了exchangeCode() action creator来获取Access Token。
使用Access Token
当用户完成OAuth2认证流程并获取了Access Token以后，我们可以在后续的API请求中使用它。
redux-oauth2-frontend提供了一个叫做getAccessToken()的selector，可以用于获取当前的Access Token:
import { getAccessToken } from 'redux-oauth2-frontend';
const accessToken = getAccessToken(store.getState());除此之外，redux-oauth2-frontend还提供了一个叫做withAuthentication()的高阶函数，可以用于为API请求添加对Access Token的认证：
-- -------------------- ---- -------
------ - ------------------ - ---- ------------------------
----- ------- - -
--------------- -------------------
--
----- -------------------- - --------------------------- ------------------
-------------------------------- -
------- -------
-------- ---------------------
----- ---------------------
--
-------- -- -
---------------- ------- -------------
--
--------- -- -
---------------- ------- ---------
---以上代码使用了withAuthentication()高阶函数为API请求添加了对Access Token的认证。
示例代码
以下是一个完整的示例代码，可以帮助你更好地理解redux-oauth2-frontend的使用：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ ----- ---- --------------
------ - ------------- ---------------------- ---------- ------------- ------------------ - ---- ------------------------
----- ----------- - -----------------
------ -------------
---
----- --------------- - -----------------------
------------- --------------------------------------
--------- ----------------------------------
--------- -----------------
------------- ---------------------
------------ ---------------------------------
-------- -----
------ -------
---
----- ----- - ------------
------------
------------------------------------------ ------------------
--
----------------------------
----- ---- - ----------------- -- -------
----------------------------------
-------- -- -
----- ------- - -
--------------- -------------------
--
----- -------------------- - --------------------------- ------------------
------ -------------------------------- -
------- -------
-------- ---------------------
----- ---------------------
---
--
-------- -- -
---------------- ------- -------------
--
--------- -- -
---------------- ------- ---------
---总结
本文介绍了使用npm包redux-oauth2-frontend实现前端OAuth2认证和授权的方法，最后给出了一个完整的使用示例。希望本文能对大家学习和使用redux-oauth2-frontend提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a17