在现代 Web 开发中，身份验证是一个关键的安全问题。在前端开发中，我们通常使用 JWT（JSON Web Token） 或者 OAuth2（开放授权）来完成身份验证的流程。在本文中，我们将使用 Express.js 实现身份验证的完整流程。
什么是 Express.js？
Express.js 是一个流行的 Node.js Web 框架，它提供了一组强大的工具和 API，用于构建 Web 应用程序和 API。它是一个非常灵活和可扩展的框架，可以轻松地与其他 Node.js 模块集成，例如：Mongoose（MongoDB 的 ODM）、Passport（身份验证中间件）等。
身份验证的完整流程
身份验证的完整流程通常包括以下步骤：
- 用户提交登录表单
- 服务器验证用户凭据
- 服务器生成 JWT 并返回给客户端
- 客户端将 JWT 存储在本地存储或者 cookie 中
- 客户端向服务器发送请求，服务器验证 JWT 的有效性
- 如果 JWT 有效，则服务器返回请求的数据
接下来我们将详细介绍每个步骤，并提供示例代码。
1. 用户提交登录表单
首先，我们需要一个登录表单，用于用户输入用户名和密码。在前端中，我们可以使用 HTML 和 CSS 构建一个简单的表单。
<form> <input type="text" name="username" placeholder="用户名" /> <input type="password" name="password" placeholder="密码" /> <button type="submit">登录</button> </form>
在用户提交表单之前，我们需要在客户端使用 JavaScript 捕获表单提交事件，并将表单数据发送到服务器。
-- -------------------- ---- -------
----- ---- - -------------------------------
------------------------------- ----- ------- -- -
-----------------------
----- -------- - --- ---------------
----- -------- - -------------------------
----- -------- - -------------------------
----- -------- - ----- --------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- --------- -------- ---
---
----- ---- - ----- ----------------
------------------
---2. 服务器验证用户凭据
在服务器端，我们需要使用 Express.js 创建一个路由，用于处理登录请求。在路由处理程序中，我们可以使用 Passport.js 中间件来验证用户凭据。
-- -------------------- ---- -------
----- -------- - --------------------
----- ------------- - -----------------------------------
---------------- ------------------- ---------- --------- ----- -- -
--- -
----- ---- - ----- -------------- -------- ---
-- ------- -
------ ---------- ------ - -------- -------- ---
-
----- --------------- - ----- -------------------------------
-- ------------------ -
------ ---------- ------ - -------- ------- ---
-
------ ---------- ------
- ----- ------- -
------ ------------
-
----
------------------ ------------------------------- --------- --------- -- -
----- ----- - ---------- ------- --------------- -- -----------
--------------- ----- ---
---在上面的代码中，我们使用 passport-local 策略来验证用户凭据。如果用户名和密码都正确，则 passport.authenticate 方法将返回一个成功的回调函数，否则将返回一个失败的回调函数。
在成功的回调函数中，我们使用 jsonwebtoken 模块生成 JWT，并将其作为响应发送给客户端。
3. 服务器生成 JWT 并返回给客户端
在上面的代码中，我们使用 jsonwebtoken 模块生成 JWT，并将其作为响应发送给客户端。
const token = jwt.sign({ userId: request.user.id }, secretKey);
response.json({ token });在生成 JWT 时，我们需要传入一个包含用户 ID 的对象和一个密钥。在实际应用中，我们应该将密钥存储在环境变量中，以避免泄露。
4. 客户端将 JWT 存储在本地存储或者 cookie 中
在客户端中，我们可以将 JWT 存储在本地存储或者 cookie 中。在本文中，我们将使用本地存储来存储 JWT。
localStorage.setItem('token', data.token);5. 客户端向服务器发送请求，服务器验证 JWT 的有效性
在客户端发送请求时，我们需要将 JWT 添加到请求头中。
const token = localStorage.getItem('token');
const response = await fetch('/api/data', {
headers: {
'Authorization': `Bearer ${token}`,
},
});在服务器端，我们需要使用 Express.js 中间件来验证 JWT 的有效性。
-- -------------------- ---- -------
----- --- - ------------------------
-------- -------------------------- --------- ----- -
----- ---------- - ---------------------------------
----- ----- - ---------- -- ------------------ ------
-- ------ -- ----- -
------ -------------------------
-
----------------- ---------- ------- ----- -- -
-- ------- -
------ -------------------------
-
------------ - -----
-------
---
-
-------------------- ------------------ --------- --------- -- -
--------------- ----- ------ ---
---在上面的代码中，我们使用 jsonwebtoken 模块验证 JWT 的有效性。如果 JWT 无效，则返回 403 错误；如果 JWT 有效，则将用户对象添加到请求中，并调用 next 函数。
6. 如果 JWT 有效，则服务器返回请求的数据
在服务器端验证 JWT 的有效性后，我们可以返回请求的数据。
app.get('/api/data', authenticateToken, (request, response) => {
response.json({ data: '私人数据' });
});在上面的代码中，我们使用 Express.js 路由处理程序返回请求的数据。
总结
在本文中，我们使用 Express.js 实现了身份验证的完整流程。我们介绍了每个步骤，并提供了示例代码。在实际应用中，我们应该根据实际需求进行修改和扩展。身份验证是一个非常重要的安全问题，我们应该花费足够的时间和精力来确保应用的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662a9a6ed3423812e47fd980