设置服务器

在本章中，我们将学习如何为顾客构建完整的结账流程。我们将使用 Fake Store API 作为模拟电商服务。从 Fake Store API 获取商品和购物车信息，并通过 Stripe 和 Stripe Elements 处理支付。

在整个章节中我们所交互的应用程序由两个部分组成：前端和后端。该应用程序的目录结构如下：

1├── backend
2│   ├── auth-middleware.js
3│   ├── index.js
4│   ├── package.json
5│   ├── payment-routes.js
6│   ├── store-service.js
7│   
8└── frontend
9    ├── package.json
10    ├── public
11    │   ├── index.html
12    ├── src
13    │   ├── App.css
14    │   ├── App.js
15    │   ├── checkout.js
16    │   ├── index.css
17    │   ├── index.js
18    │   ├── pages
19    │   │   ├── BillingDetails.jsx
20    │   │   ├── Cart.jsx
21    │   │   └── Pay.jsx

由于本课主要讲解服务器的搭建，因此我们将重点放在应用目录中的 backend 文件夹。前端部分将在下一课中讨论。

以下为 backend 文件夹中相关文件的完整代码：

Node.js

1const authMiddleware = (req, res, next) => {
2    // 从请求头中获取授权值
3    const userId = req.headers.authorization;
4
5    if (!userId)
6        return res.status(401)
7                  .json({ error: true, message: "未经授权的请求" });
8
9    req.userId = userId;
10    next();
11};
12
13module.exports = authMiddleware;

让我们逐个分析这些文件，尝试理解其中的代码。

验证顾客身份

为了使示例更具现实感，我们将模拟 API 认证与授权，确保只有合法用户或顾客可以访问后端服务。

为了实现 API 认证，我们在 auth-middleware.js 文件中创建了一个 Express 中间件。Express 中间件本质上是一个函数，它会在请求被路由处理函数处理之前拦截该请求。

在中间件函数中，获取授权头的值并检查其是否存在。客户端将通过授权头传递 userId 来认证 API 请求。在实际场景中，授权头通常包含用于用户认证的 API 令牌，但为简洁起见，此处我们简化处理。最后一步是将 userId 添加到 req 对象中，以便在路由处理函数中访问。

在 index.js 文件中，使用 app.use() 方法将 authMiddleware 中间件挂载到服务器。

结账前填充购物车

我们创建了 store-service.js 文件，用于处理从 Fake Store API 获取数据的所有业务逻辑。在真实场景中，这可能是一个专门处理电商操作的后端服务，例如获取或创建商品、购物车等。

生成账单

在 payment-routes.js 文件中，使用 Stripe 的 密钥 初始化 stripe 库，并创建一个 POST 路由来创建支付意图。同时，从商店服务中获取用户的购物车项目。

在 index.js 文件中，使用 app.use() 方法将 paymentRoutes 路由挂载到服务器。