redux-refresh-token 是一个能够管理带有刷新令牌的 JWT（JSON Web Token）的 Redux 中间件。它可以自动刷新 JWT，并在刷新后重新发出请求，无需手动刷新或处理过期令牌。本文将介绍如何使用该 npm 包，并提供使用示例。
安装
首先，在你的 React 或 Redux 应用中，你需要安装 redux-refresh-token。可以通过使用 npm 或 yarn 包管理器进行安装。
npm install redux-refresh-token
或
yarn add redux-refresh-token
配置
安装完成后，需要在 Redux Store 中添加 redux-refresh-token 中间件。以下是一个示例配置。默认情况下，redux-refresh-token 需要使用一个名为 "refreshToken" 的刷新令牌，作为一个字符串属性存在于你的 JWT 中。你可以根据需要进行更改。
import { createStore, applyMiddleware } from 'redux';
import jwtMiddleware from 'redux-refresh-token';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(jwtMiddleware({ refreshTokenPropertyName: 'refreshToken' })),
);使用
使用 redux-refresh-token 非常简单。它会自动管理使用了 JWT 的请求，当 JWT 过期后，它会使用 refreshToken 来自动刷新你的 JWT。
以下是一个示例请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- -------------------
----- --------- - ---------------------------------- ----- --- - -------- -- -- -
----- ----- - -----------
----- - --- - - -----------
----- -------- - ----- ---------------------- -
-------- -
-------------- ------- --------
--
---
------ --------------
---当你的 JWT 过期时，redux-refresh-token 会使用 refreshToken 自动地刷新 JWT，并重新发送请求。
示例
以下是一个在 React App 中使用 redux-refresh-token 的完整示例。
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------ ------- --------- - ---- ------------
-------- ----- -
----- -------- - --------------
----- - ---------------- ----- --------- - - ------------------- -- ------------
------------------ -- -
-- ----------- --- ------------
-- ----------------- -
----------------------
-
-- ----------------- -----------
-- ----------- -
------ ----------------------
-
-- ------------------ -
------ -
-----
--------------
------- ----------- -- ------------------------ ---- ------ ------------
------
--
-
------ -
-----
------------ -----------------
------- ----------- -- -----------------------------------
------
--
-
------ ------- ----actions.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ---------------- - ---- -------------------
------ ----- ----- - ------------------------------ ----- -- -- -
----- -------- - ----- -------------------------
------ --------------
---
------ ----- ------ - ------------------------------- ----- -- -- -
----- -------- - ----- --------------------------
------ --------------
---
------ ----- --------- - ---------------------------------- ----- --- - -------- -- -- -
----- ----- - -----------
----- - --- - - -----------
----- -------- - ----- ---------------------- -
-------- -
-------------- ------- --------
--
---
------ --------------
---
----- --------- - -------------
----- -------
------------- -
---------------- ------
---------- ------
----- -----
---- -----
--
--------- ---
-------------- -
------------------ ------- ------- -- -
--------------------- - -----
--------------- - ------
--------- - -------------------
--
------------------- ------- -- -
--------------------- - ------
---------- - -----
--------- - -----
--
-------------------- ------- -- -
--------------- - -----
--
---------------------- ------- ------- -- -
--------------- - ------
---------- - ---------------
--
--
---
------ ------- ------------------结论
redux-refresh-token 提供了一种有效方法来管理 JWT 的刷新和过期。它可以自动处理许多繁琐的细节，让你专注于构建你的前端应用。使用上述示例代码，你可以更加深入地了解如何使用 redux-refresh-token，并将其应用于你自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac75