npm 包 @elune/auth 使用教程

阅读时长 6 分钟读完

前言

在现代 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