前言
在现代 Web 开发中,跨域请求和用户认证是不可避免的问题。为解决这些问题,我们可以使用第三方模块来帮助我们实现。@elune/auth 是一个基于 JWT 的用户认证模块,能够帮助我们实现前后端用户认证的逻辑。
安装和配置
在使用 @elune/auth 之前,我们需要先安装和配置该模块。
安装
通过 npm 可以将 @elune/auth 安装到你的项目中:
npm i @elune/auth
配置
在使用 @elune/auth 之前,我们需要在后端实现基于 JWT 的身份认证。下面是一个 Express.js 实现的例子:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ------------------------ ----- --- - ---------- ------------------ ----- ---- -- - -- ------------ ----- ---- - --------- -- ------ -- ------------- --- ------- -- ------------- --- --------- - ------ ---------------------- -------- ---------- -------- -- --------- --- - -- ------ --- - ---------- --- ----- ----- - ---------- --------- ------------- -- --------- - ---------- ---- --- -- -- --- ---------------------- ----- --- --- ---------------- ----- ---- -- - -- ------ --------- ----- ----- - --------------------------------- ------ --- - ----- ------- - ----------------- ---------- ---------------------- ----- ----- ----- --- - ----- ----- - ---------------------- -------- -------- ------ --- - --- ---------------- -- -- ------------------- -----------展开代码
在上面的例子中,我们先在 /login 路由中对用户登录信息进行验证,并在验证通过后生成一个 JWT,在返回该 JWT 发送给前端。之后,前端需要在每一次请求中带上该 JWT(通常在请求头的 Authorization 字段中),而后端需要在对请求进行处理之前先对 JWT 进行验证。这样,我们就实现了基于 JWT 的身份认证。
接下来,我们需要在前端中使用 @elune/auth 来帮助我们处理 JWT 相关的逻辑。
初始化和配置
使用 @elune/auth 需要进行初始化和配置。下面是一个示例:
import { createAuth } from '@elune/auth'; const auth = createAuth({ jwt: { secret: 'secret', }, });
在上面的示例中,我们使用 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 的值为错误信息。
以下是一个示例:
auth.signIn({ username: 'admin', password: '123456' }) .then(token => console.log(token)) .catch(error => console.error(error));
verify(token: Token): boolean
验证传入的 JWT 是否有效。
该方法的 token 参数为需要验证的 JWT。
该方法返回一个 boolean 值,表示 JWT 的有效性。
以下是一个示例:
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNTE2MjM5MDIyfQ.uhFZZV7z22AvQ2TC6toCJ6xlyD7Z1CsrZuR7hP5L-OU'; const isValid = auth.verify(token); console.log(isValid); // true
示例
下面是一个示例,演示了如何使用 @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