前言
在很多应用中，用户需要进行身份验证才能访问某些资源。传统的用户名和密码验证机制已经不再安全，因此许多应用选择使用 JSON Web Token（JWT）作为身份验证机制。在前端开发中，我们可以使用 jwt-basic-auth 这个 npm 包来方便地实现 JWT 权限验证功能。
什么是 JSON Web Token
JSON Web Token 是一种安全的、开放标准（RFC 7519）的身份验证方式。它可以传递用户身份信息，如用户 ID 和权限等，通过其中的“头部”、“载荷”和“签名”三部分来构成 Token，用于验证请求方是否合法。
什么是 jwt-basic-auth
jwt-basic-auth 是一个基于浏览器的 JSON Web Token（JWT）身份验证库。它可以在前端应用程序中处理身份验证，自动附加 JWT 到请求中，并在每个请求中验证 JWT。 jwt-basic-auth 还支持 Cookie 和 Local Storage，可以根据需求自由选择存储 JWT 的位置。
安装
在 Terminal 中输入以下命令来安装 jwt-basic-auth
npm install jwt-basic-auth --save
或使用 Yarn
yarn add jwt-basic-auth
使用
初始化
为了使用 jwt-basic-auth，您需要先创建 Auth 实例。请参考以下示例：
import { Auth } from 'jwt-basic-auth';
const auth = new Auth({
apiUrl: 'https://api.example.com',
authUrl: 'https://api.example.com/auth',
storage: 'cookie',
cookieName: 'jwt',
});登录
现在我们已经有了一个 Auth 实例，接下来我们需要进行身份验证。身份验证方法需要返回一个 Promise，并且正确验证时应该设置 JWT。
以下是一个基本的身份验证方法的示例：
-- -------------------- ---- -------
----- -------- ------------ --------- -
----- -------- - ----- ------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ -------- ---
---
-- -------------- -
----- --- -------------- ----- -- -----------
-
----- ---- - ----- ----------------
--------------------------
-验证
验证一个请求的最简方法是像这样使用 fetch 方法：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- ---------------------------- -
-------- - -------------- ------------------------ --
---
----- ---- - ----- ----------------
------ -----
-您可以在每个请求中手动添加 auth.authorizationHeader，也可以使用类似 axios、superagent 等 HTTP 库来自动添加。
登出
当您从登录状态退出时，必须清除 JWT。有以下几种方法：
auth.clearToken(); // 清除 JWT auth.logout(); // 清除 JWT，并将用户重定向到登录页面 auth.isAuthorized = false; // 清除 JWT，但不重定向
当然，您还可以根据自己的需求来扩展 Auth 类。
总结
通过阅读这篇教程，您已经可以使用 jwt-basic-auth 完成前端 JWT 身份验证功能了。当然，这只是 jwt-basic-auth 包提供的基本功能。您可以根据自己的需求扩展 Auth 类，只要您认真编写代码，那么这个库的使用也不会很困难。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554cc81e8991b448d1fef