ミドルウェア

ミドルウェアにより、リクエストとレスポンスをインターセプトし、ページやエンドポイントがレンダリングされる直前に動的に振る舞いを注入できます。こうしたレンダリングは、ページが事前レンダリングされる場合にはビルド時におこなわれますが、オンデマンドにレンダリングされるページの場合は、ルートへのリクエスト時におこなわれます。

また、ミドルウェアを使って、すべてのAstroコンポーネントとAPIエンドポイントで利用可能なlocalsオブジェクトを変更し、リクエスト固有の情報を各エンドポイントとページで設定・共有することもできます。このオブジェクトは、このミドルウェアがビルド時に実行される場合でも利用できます。

基本的な使い方

src/middleware.js|ts というファイルを作成します。（あるいは、src/middleware/index.js|ts を作成しても構いません。）

このファイルの中で、contextオブジェクトとnext()関数を受け取るonRequest()関数をエクスポートします。これをデフォルトエクスポートにしてはいけません。

export function onRequest ({ locals, request }, next) {
    // リクエストからデータをインターセプトします
    // 必要に応じて、`locals`内のプロパティを改変します
    locals.title = "新しいタイトル";

    // Responseか`next()`の結果を返します
    return next();
};

.astroファイルの中で、Astro.localsを使ってレスポンスデータにアクセスします。
src/components/Component.astro
```
---
const data = Astro.locals;
---
<h1>{data.title}</h1>
<p>この{data.property}はミドルウェアで設定しました。</p>
```

`context`オブジェクト

contextオブジェクトには、レンダリング中に他のミドルウェア、APIルート、.astroルートで利用可能な情報が含まれています。

これはonRequest()に渡されるオプション引数で、localsオブジェクトや、レンダリング中に共有されるその他のプロパティを含む場合があります。たとえばcontextオブジェクトには、認証に使用されるクッキーを含められます。

`context.locals`にデータを保存する

context.localsは、ミドルウェア内で変更可能なオブジェクトです。

このlocalsオブジェクトは、リクエスト処理のプロセスを通じて受け渡されていき、APIContextとAstroGlobalのプロパティとして利用できます。これにより、ミドルウェア、APIルート、.astroページ間でデータを共有できます。ユーザーデータなど、リクエスト固有のデータを各レンダリングステップをまたいで保持する際に役立ちます。

localsには、文字列、数値、さらには関数やマップといった複雑なデータ型など、どんな型のデータでも格納できます。

export function onRequest ({ locals, request }, next) {
    // リクエストからデータをインターセプトします
    // 必要に応じて、`locals`内のプロパティを改変します
    locals.user.name = "John Wick";
    locals.welcomeTitle = () => {
        return "おかえりなさい " + locals.user.name;
    };

    // Responseか`next()`の結果を返します
    return next();
};

そして、任意の.astroファイル内でAstro.localsによりこの情報を利用できます。

---
const title = Astro.locals.welcomeTitle();
const orders = Array.from(Astro.locals.orders.entries());
---
<h1>{title}</h1>
<p>この{data.property}はミドルウェアで設定しました。</p>
<ul>
    {orders.map(order => {
        return <li>{/* 各値を使って何かします */}</li>;
    })}
</ul>

localsは単一のAstroルートの中で生成・消滅します。ページルートがレンダリングされると、localsはもう存在せず、その後また新しいものが作成されます。複数のページリクエストをまたいで保持されるべき情報は、別の場所に保存する必要があります。

センシティブな情報を消去する例

以下の例では、ミドルウェアを使用して「極秘情報」という文字列を「削除済み」という語に置き換えることで、変更されたHTMLをページにレンダリングできるようにします。

export const onRequest = async (context, next) => {
    const response = await next();
    const html = await response.text();
    const redactedHtml = html.replaceAll("極秘情報", "削除済み");

    return new Response(redactedHtml, {
        status: 200,
        headers: response.headers
    });
};