前言
在前端开发中，我们常常需要调用后端接口来获取数据，然而在调用接口时通常需要先进行身份验证，这就需要在前端中使用 JSON Web Token（JWT）进行身份验证。
@knight_42/octopus 是一个用于在前端中进行 JWT 身份验证的 npm 包。在本文中，我们将详细介绍如何使用 @knight_42/octopus 进行 JWT 身份验证。
安装
使用 npm 进行安装：
npm install @knight_42/octopus
用法
导入
使用以下语句导入 Octopus：
import Octopus from '@knight_42/octopus';
初始化
首先，我们需要在调用 Octopus 的其他方法之前先进行初始化。初始化需要传入一个配置对象，该对象包含以下字段：
baseUrl（必选）：API 服务器的 URL 前缀，比如https://your.api.server/api/storageKey（可选）：一个字符串，用于在 localStorage 中存储身份验证信息，默认为'jwt'loginUrl（可选）：用户登录页面的 URL，默认为'./login'refreshUrl（可选）：刷新 JWT 的接口，默认为'./refresh'refreshInterval（可选）：刷新 JWT 的间隔时间，单位为秒，默认为300refreshExpireTime（可选）：自动刷新 JWT 的截止时间，即距离过期时间小于该值时将自动刷新 JWT，单位为秒，默认为86400
以下是一个典型的初始化语句：
Octopus.init({
baseUrl: 'https://your.api.server/api/',
storageKey: 'jwt',
loginUrl: './login',
refreshUrl: './refresh',
refreshInterval: 300,
refreshExpireTime: 86400,
});登录
在用户进行登录操作时，我们需要调用 Octopus 的 login 方法。该方法需要传入一个对象，该对象包含以下字段：
username（必选）：用户名password（必选）：密码
以下是一个典型的登录语句：
Octopus.login({
username: 'admin',
password: '123456',
}).then(() => {
console.log('登录成功！');
}).catch(() => {
console.log('登录失败！');
});发送请求
在调用 API 时，我们需要将身份验证信息发送到服务器端。这可以通过在 API 请求的头部中添加身份验证信息的方式来实现。
Octopus 提供了 fetch 和 axios 两种方式来发送 API 请求。你可以根据自己的实际需求选择其中一种方式。
使用 fetch
使用 fetch 发送 API 请求时，我们需要在请求头部中添加 Authorization 字段，该字段的值为 Bearer <JWT>，其中 <JWT> 表示从 localStorage 中获取到的 JWT。
以下是一个典型的使用 fetch 发送 API 请求的语句：
-- -------------------- ---- -------
----------------------------------------- -
-------- -
---------------- ------- - - ----------------------------
--
------------------ -- -
------ ----------------
-------------- -- -
------------------
----------- -- -
---------------------
---使用 axios
使用 axios 发送 API 请求时，我们需要在 axios 的实例上添加一个请求拦截器，在该拦截器中添加 Authorization 字段。
以下是一个典型的使用 axios 发送 API 请求的语句：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- -------- - -------------- -------- ------------------------------- --- ------------------------------------------ -- - ---------------------------- - ------- - - ---------------------------- ------ ------- --- ------------------------------------ -- - --------------------------- ----------- -- - --------------------- ---
刷新 JWT
当 JWT 过期时，我们需要在请求 API 时重新进行身份验证。
Octopus 提供了 refresh 方法来刷新 JWT。该方法需要传入一个对象，该对象包含以下字段：
token（必选）：已过期的 JWT
以下是一个典型的刷新 JWT 的语句：
Octopus.refresh({
token: localStorage.getItem('jwt'),
}).then((newJwt) => {
console.log('刷新成功！');
localStorage.setItem('jwt', newJwt);
}).catch(() => {
console.log('刷新失败！');
});注销
当用户退出登录时，我们需要使用 logout 方法来清除 localStorage 中的 JWT。
以下是一个典型的注销语句：
Octopus.logout();
示例代码
以下是一个包含登录、请求 API 和刷新 JWT 的示例代码：
-- -------------------- ---- -------
------ ------- ---- ---------------------
--------------
-------- -------------------------------
----------- ------
--------- ----------
----------- ------------
---------------- ----
------------------ ------
---
---------------
--------- --------
--------- ---------
---------- -- -
---------------------
------------------------------------- -- -
----------------------
----------- -- -
---------------------
---
----------- -- -
---------------------
---
------------- -- -
-----------------
------ ----------------------------
---------------- -- -
---------------------
--------------------------- --------
----------- -- -
---------------------
---
-- -------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e24456a