在前端开发中，有时需要使用假数据来进行调试和样式排版，而且还需要进行用户身份验证。而 json-server-jwt-auth 这个 npm 包是一个非常好用的工具，它可以快速地创建一个具有身份验证功能的假数据服务器，帮助我们快速地开发和调试。
安装
安装非常简单，只需要在命令行中输入以下命令即可：
npm i json-server-jwt-auth
安装完成后，我们就可以使用它来创建一个假数据服务器了。
创建服务器
首先，我们需要在项目目录下创建一个 JSON 文件，用来存储假数据。以 db.json 为例：
{ "users": [ { "id": 1, "name": "Tom" }, { "id": 2, "name": "Alice" } ] }
然后，我们需要在项目目录下创建一个 server.js 文件，并在其中编写以下代码：
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- ---- - -------------------------------- ----- ------ - -------------------- ----- ------ - ----------------------------- ----- ----------- - ---------------------- ----- ---- - ---------------- -- ----- ------------------------ ----------------- ------------------- ------------------- -- -- - ----------------- ------ -- ------- -- ---- ---------- ---展开代码
上述代码中，我们首先引入了 json-server 和 json-server-jwt-auth 两个 npm 包，并创建了一个 JSON Server 实例，并指定了 db.json 作为服务器的数据源。然后我们使用了 json-server 中的默认中间件和包括身份验证的中间件，并将 router 和 auth 挂载到 server 上，最后通过 listen 方法启动服务器。
用户身份验证
json-server-jwt-auth 支持多种不同类型的身份验证：
noauth：无需身份验证；basic：基本身份验证；bearer：令牌身份验证；jwt： JSON Web Token 身份验证。
下面以 JSON Web Token 身份验证为例，让我们来看一下如何启用身份验证和如何使用 json-server-jwt-auth 库：
启用身份验证
我们需要在 server.js 文件中添加以下代码来启用身份验证：
const auth = require('json-server-jwt-auth'); server.use(auth);
这会将 json-server-jwt-auth 中的身份验证中间件加载到我们的 JSON Server 实例中。
用户注册
我们可以在 JSON 数据中为注册用户定义一个 users 数组，该数组包含用户名和密码：
-- -------------------- ---- ------- - -------- - - ----- -- ----------- -------- ----------- -------- - - -展开代码
我们在通过 POST 请求向 /register 路径发送身份验证请求时，会将用户添加到 users 数组中并返回生成的 JSON Web Token。以 axios 库为例：
axios.post('http://localhost:3000/register', { username: 'admin', password: '123456' }).then((response) => { console.log(response.data); })
用户登录
我们可以通过 POST 请求向 /login 路径发送身份验证请求来执行用户登录操作：
axios.post('http://localhost:3000/login', { username: 'admin', password: '123456' }).then((response) => { console.log(response.data); })
收到响应后我们会得到一个包含 JSON Web Token 的响应信息。
身份验证
要向 JSON Server 发送需要身份验证的请求，我们需要在请求的标头（header）中包含 JSON Web Token。例如，我们需要发送一个 GET 请求来获取 users 数组：
axios.get('http://localhost:3000/users', { headers: { Authorization: 'Bearer ' + token } }).then((response) => { console.log(response.data); });
在上述代码中，我们将获取到的 JSON Web Token 放在 Authorization 标头中，方法名后面记得有一个空格 。
示例代码
下面是一个完整的示例代码：
db.json
-- -------------------- ---- ------- - -------- - - ----- -- ----------- -------- ----------- -------- - - -展开代码
server.js
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- ---- - -------------------------------- ----- --- - ------------------------ ----- ------ - -------------------- ----- ------ - ----------------------------- ----- ----------- - ---------------------- ----- ---- - ---------------- -- ----- ------------------------ ----------------- --------------------- ----- ---- -- - ----- ---- - ----------------------------- --------- ------------------ --------- ----------------- ----------- -- ------ - ----- ----- - ---------- ----- ------------- -- ---------- ---------- ----- --- - ---- - -------------------- - --- ------------------- ------------------- -- -- - ----------------- ------ -- ------- -- ---- ---------- ---展开代码
上述代码中，我们首先引入了 json-server、json-server-jwt-auth 和 jsonwebtoken 三个 npm 包，创建了 JSON Server 实例和数据路由，最后使用中间件将 router 和 auth 挂载到 server 上。在 /login 路径上处理用户身份验证请求，并返回用于身份验证的 JSON Web Token。
结论
掌握 json-server-jwt-auth 的使用方法可以帮助我们快速地创建一个具有身份验证功能的假数据服务器，加快前端开发进程，从而更快地交付满足用户需求的软件。这个 npm 包非常方便，值得每一个前端开发工程师掌握和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226d2
