在前端应用程序中,JWT (JSON Web Token) 是一种常见的身份验证和授权机制。然而,由于 JWT 有过期时间,因此当 JWT 过期时,我们需要刷新它以确保用户可以持续使用应用程序。Redux 可以帮助我们更好地管理应用程序状态,并通过 Redux 中间件来处理异步操作。本文将介绍如何使用 Redux 来自动刷新 JWT token。
第1步:创建 Redux Action 和 Reducer
首先,我们需要创建一个 Redux action 来请求新的 JWT token 并更新应用程序状态。在 actions.js
文件中添加以下代码:
-- -------------------- ---- ------- ------ ----- --------------------- - ------------------------ ------ ----- --------------------- - ------------------------ ------ ----- --------------------- - ------------------------ ------ -------- -------------------- - ------ -------- -- - ---------- ----- --------------------- --- ------ ----------------------- -------------- -- ---------------- ---------- -- - --------------------------- ------------ ---------- ----- ---------------------- ------ ---------- --- -- ------------ -- - ---------- ----- ---------------------- ------ ------------- --- --- -- -
该 action 发送一个异步请求 /refresh_token
,获取新的 JWT token,并将其存储在本地存储中。如果请求成功,将调度 REFRESH_TOKEN_SUCCESS
action,并更新应用程序状态中的 token;否则,将调度 REFRESH_TOKEN_FAILURE
action,并将错误消息存储在状态中。
接下来,我们需要创建相应的 reducer,以便在 Redux store 中更新 token 状态。在 reducers.js
文件中添加以下代码:
-- -------------------- ---- ------- ------ - ---------------------- ---------------------- --------------------- - ---- ------------ ----- ------------ - - ----------- ------ ------ ----- ------ ---------------------------- -- -------- ----------------- - ------------- ------- - ------ ------------- - ---- ---------------------- ------ ----------------- ------ - ----------- ----- ------ ----- --- ---- ---------------------- ------ ----------------- ------ - ----------- ------ ------ ----- ------ ------------- --- ---- ---------------------- ------ ----------------- ------ - ----------- ------ ------ ------------- --- -------- ------ ------ - - ------ ------- ------------
在这个 reducer 中,首先将初始状态设置为从本地存储中获取的 token。然后,在每个 action 对应的 case 中更新应用程序状态。如果请求正在进行中,则将 isFetching
设置为 true
,否则将其设置为 false
。如果请求成功,则将 token
更新为新的 JWT token;如果失败,则将错误消息存储在 error
状态中。
第2步:创建 Redux Middleware
现在我们需要创建一个 Redux 中间件来处理异步操作并自动刷新 JWT token。在 middleware.js
文件中添加以下代码:
-- -------------------- ---- ------- ------ - ---------------------- ------------------ - ---- ------------ -------- ---------------------- - --- ---------- ------ -- --------- -------- -- -- ---- -- ------ -- - -- ----- ------ ----- --- ----- - ------ ----- ------------ - ----------- -- ------------------------- -- --------------- - ------ ------------- - -- ----------------------- ----- - ---- - - ----------- -- ------------- - ------ ------------- - -- -- --- ----- ------ ----- ------- -- ---------------------------- - ------------------------ ------------------------------ -------- -- - ----- - ---- - - ----------- -- ------------ - ------ ---------- ---------- ----- - --------------- ------ ---- - --- - -- --------- -- ---- -- --------- --- ----- --------- --------- - ------------- -- - ----- - ---- - - - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------