前言
在现代 Web 开发中，跨域请求和用户认证是不可避免的问题。为解决这些问题，我们可以使用第三方模块来帮助我们实现。@elune/auth 是一个基于 JWT 的用户认证模块，能够帮助我们实现前后端用户认证的逻辑。
安装和配置
在使用 @elune/auth 之前，我们需要先安装和配置该模块。
安装
通过 npm 可以将 @elune/auth 安装到你的项目中：
--- - -----------
配置
在使用 @elune/auth 之前，我们需要在后端实现基于 JWT 的身份认证。下面是一个 Express.js 实现的例子：
----- ------- - -------------------
----- --- - ------------------------
----- --- - ----------
------------------ ----- ---- -- -
-- ------------
----- ---- - ---------
-- ------ -- ------------- --- ------- -- ------------- --- --------- -
------ ---------------------- -------- ---------- -------- -- --------- ---
-
-- ------ --- - ---------- ---
----- ----- - ---------- --------- ------------- -- --------- - ---------- ---- ---
-- -- ---
---------------------- ----- ---
---
---------------- ----- ---- -- -
-- ------ ---------
----- ----- - --------------------------------- ------
--- -
----- ------- - ----------------- ----------
---------------------- ----- ----- ----- ---
- ----- ----- -
---------------------- -------- -------- ------ ---
-
---
---------------- -- -- ------------------- -----------在上面的例子中，我们先在 /login 路由中对用户登录信息进行验证，并在验证通过后生成一个 JWT，在返回该 JWT 发送给前端。之后，前端需要在每一次请求中带上该 JWT（通常在请求头的 Authorization 字段中），而后端需要在对请求进行处理之前先对 JWT 进行验证。这样，我们就实现了基于 JWT 的身份认证。
接下来，我们需要在前端中使用 @elune/auth 来帮助我们处理 JWT 相关的逻辑。
初始化和配置
使用 @elune/auth 需要进行初始化和配置。下面是一个示例：
------ - ---------- - ---- --------------
----- ---- - ------------
---- -
------- ---------
--
---在上面的示例中，我们使用 createAuth 方法创建了一个 auth 实例，并通过传递配置项来初始化该实例。目前支持的配置项有 jwt 和 http（或 https），分别用于配置 JWT 和请求的默认配置。在上面的配置中，我们传入了 JWT 的 secret 值，即前后端共享的一个秘钥。
接下来，我们可以通过调用 auth 的方法来使用相关功能。
API
signIn(credentials: Credentials): Promise<Token>
使用 username 和 password 进行登录，并返回生成的 JWT。
该方法的 credentials 参数为登录信息，是一个包含了 username 和 password 字段的对象。
该方法返回一个 Promise，resolve 的值为生成的 JWT，reject 的值为错误信息。
以下是一个示例：
------------- --------- -------- --------- -------- -- ----------- -- ------------------- ------------ -- ----------------------
verify(token: Token): boolean
验证传入的 JWT 是否有效。
该方法的 token 参数为需要验证的 JWT。
该方法返回一个 boolean 值，表示 JWT 的有效性。
以下是一个示例：
----- ----- - -------------------------------------------------------------------------------------------------------------------------------------- ----- ------- - ------------------- --------------------- -- ----
示例
下面是一个示例，演示了如何使用 @elune/auth 和 axios 一起实现基于 JWT 的身份认证和数据请求：
------ ----- ---- --------
------ - ---------- - ---- --------------
----- ---- - ------------
---- -
------- ---------
--
----- -
-------- ------------------------
--
---
------------- --------- -------- --------- -------- --
----------- -- -
-- --------- ---
------------------------------------------- - ------- ----------
-- ------
------------------
-------------- -- ---------------------------
------------ -- ----------------------
--
------------ -- ----------------------在上面的示例中，我们首先使用 @elune/auth 完成用户的登录信息验证，并获取到生成的 JWT。接着，在后续的请求中，我们将 JWT 添加到了 axios 的默认请求头中，这样在后续的数据请求中，就可以自动带上该 JWT 了。最后，我们使用 axios 发送了一个 GET /data 的请求，并在其响应成功时打印出了返回的数据。注意，由于我们带上了 JWT，所以获取数据时后端会对其进行身份验证。如果验证成功，则返回数据，否则返回错误信息。
总结
本文介绍了如何使用 @elune/auth 来实现基于 JWT 的身份认证逻辑。我们首先在后端实现了 JWT 身份验证，接着在前端使用 @elune/auth 完成了用户登录以及 JWT 相关的逻辑。最后，我们结合 axios 演示了如何发送带上 JWT 的数据请求。希望该教程对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/108753