在前后端分离的开发模式下,前端需要处理用户的认证问题。JSON Web Token (JWT) 是一种常见的认证方式,可以通过其来验证用户身份并保护接口。auth-jwt-reducer
是一个基于 JavaScript 的 npm 包,能够帮助前端在 Redux 应用中简单地管理 JWT 认证相关的状态,如登录、登出、鉴权等。
安装
在终端命令行中输入以下命令可以通过 npm 安装 auth-jwt-reducer
:
--- ------- ------ ----------------
使用
设置 Redux store
auth-jwt-reducer
返回的是一个 Redux reducer ,因此需要通过 combineReducers
将其与其他 reducer 合并。示例:
------ - ---------------- ----------- - ---- ------- ------ - ----------- - ---- ------------------ ----- ----------- - ----------------- ----- ------------ -- ----- -------- --- -- ----- ----- - ------------------------
定义 action
首先,使用 authenticateRequest
action 发送认证请求。在认证成功后,接受 authenticateSuccess
action 并将 JWT 存储在 Redux store 中,如下所示。失败时会接受 authenticateFailure
action,因此可以在错误处理和视图提示方面做出相应的反应。
------ - -------------------- -------------------- ------------------- - ---- ------------------ -- --- -------- --------------- --------- - ------ ---------- -- - ------------------------------- ------ ------------------- - ------- ------- ----- ---------------- --------- -------- --- -------- - --------------- ------------------ - ---------------- -- - -- ------------- - --------------------------- -- - ----------------------------------------- -- - ---- - ------------------------------- - -- - - -- ---
鉴权和登出
使用 isAuthenticated
函数可检查当前登录的用户是否已通过 JWT 验证。如果应用需要保护内容(如用户个人信息)并要求用户已通过身份验证,可以使用 requireAuthentication
HOC 来保护相关的组件。
使用 logout
action 注销用户。该 action 将从 Redux store 中清除 JWT 并将用户状态重置为未认证状态。
------ - ---------------- ---------------------- ------ - ---- ------------------ -- --- -------- ---------------- - -- ------------------ -- ----------------------- - ------ -------- ------ --------- - ---- - ------ ------------------------ - - ----- ---------------------- - -------------------------------- -- --- -------- -------------- - ------ ---------- -- - ------------------ - -
示例
假如我们有如下表单:
------ ------ - -------- - ---- ------- -------- ----------- -------- -- - ----- ---------- ------------ - ------------ ----- ---------- ------------ - ------------ -------- ------------------- - ---------------------- ---------- --------- -------- -- - ------ - ----- ------------------------ ----- ------- ---- ------ ----------- ---------------- ----------- -- ---------------------------- -- -------- ------ ----- ------- --- ------ --------------- ---------------- ----------- -- ---------------------------- -- -------- ------ ----- ------- ------------------------- ------ ------- - -
使用 auth-jwt-reducer
管理用户认证状态的示例:
------ ----- ---- ------- ------ - ------------ ----------- - ---- ------------- ------ - ------------------- - ---- ------------------ ------ - ----- - ---- ------------ -------- ----------- - ----- ------- --------- - -------------- ----- -------- - ------------- ----- ------ - ----------------- -- ------------------ -------- ------------------ - ------------------------------- -------------- -------------------- ---------------------------- -- - -- ------------- - ------------------------- -- - ----------------------------------------- -- - ---- - -------------------- - ----------- -- - ---------------------- -- - ------ - ----- ----------- ------------------ ------- --- ---------------- - ------------------ - ----- ------- --- --------------- - ---------------- - - ---------- ----------------------- -- -- ------ - -
当用户在表单中填写了用户名和密码并提交后,将发送 POST 请求到 API 端点 /api/login
,登录成功后,JWT 将存储在 Redux store 中,并显示“认证成功”消息,可以通过 isAuthenticated
函数检查用户是否已通过身份验证。同时,在后续的 API 请求中,JWT 将通过 HTTP header 发送给服务器进行身份验证。当用户登出时,JWT 将从 Redux store 中清除。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005549181e8991b448d1d42