中间件

在客户端应用中，类似于 Milkio 的中间件能够实现在向后端发送请求之前或之后执行定制的逻辑。以登录功能为例，我们常常采用 JSON Web Tokens (JWT) 来确保请求的安全性，这意味着我们需要在每个请求的头部添加用于验证用户身份的令牌。而且，这些令牌可能会随时间变化。客户端中间件可以简化这一过程，自动在每个请求中添加适当的令牌。这是客户端中使用中间件的典型示例。

如何使用

打开你的工程中的 /src/packages/client/milkio.ts 文件，你可以按照以下方式编写中间件。你会发现它的实现方式与 Milkio 的中间件非常相似。

export * from "./types";
import { failCode } from "./project/src/fail-code";
import type ApiSchema from "./project/generated/api-schema";
export { defineMiddleware } from "milkio-client";
import { defineMiddleware, defineMilkioClient } from "milkio-client";

const middlewareA = defineMiddleware({
   bootstrap() {
     // 当客户端初始化时的操作
   },
   beforeExecute({ path, storage, params, headers }) {
     // 发送请求前的操作
   },
   afterExecute({ path, result, storage }) {
     // 发送请求后的操作
   },
});

export const createClient = defineMilkioClient<typeof ApiSchema, typeof failCode>([
   // 添加中间件
   middlewareA(),
]);

export const FailCode = failCode;

由于客户端运行环境的不确定性（尽管大多数情况下是在浏览器中运行，但未来可能会有其他环境），因此建议使用方法参数中的 storage 来存储类似令牌的数据。它的使用方式与 localStorage 类似，主要区别在于它返回的是 Promise，因此需要在前面添加 await 来处理异步操作。

如何在客户端中添加中间件

除了在你的 Milkio 工程中直接提供中间件外，你还可以在你的 web 工程中添加中间件。在 client.ts 文件中，你可以这样添加中间件：

export const client = createClient({
   baseUrl: "http://localhost:9000/",
   middlewares: () => [middlewareA],
});