🍋

Fresh で特定のページのみ Basic 認証を動かしたい

2024/07/03に公開

状況

  • アプリケーション内にユーザページと管理者ページが存在する.

  • 管理者ページのみ Basic 認証を動かしたい.

解決策

Fresh には middleware 機能が存在する.これを用いてルーティングの範囲を絞って認証を動かすことができる.

参考: https://fresh.deno.dev/docs/concepts/middleware

下記のようなルーティングを考える(ルーティング以外は省略).

.
└── routes
    ├── admin
    │   ├── [id].ts
    │   └── index.ts
    ├── [name].tsx
    ├── api
    │   └── joke.ts
    └── index.tsx

admin 以下のルートに認証をかけたいとする場合,admin 以下に _middleware.ts を作成し,以下の内容を記述する.

// routes/admin/_middleware.ts

import { MiddlewareHandlerContext } from "$fresh/server.ts";

interface State {
  data: string;
}

export async function handler(
  req: Request,
  ctx: MiddlewareHandlerContext<State>
) {
  // 🔽 ユーザ名とパスワードを設定
  const user = "admin";
  const password = "password";

  // 🔽 認証を動かすコード
  if (
    req.headers.get("Authorization") !== `Basic ${btoa(`${user}:${password}`)}`
  ) {
    const headers = new Headers({
      "WWW-Authenticate": 'Basic realm="Fake Realm"',
    });
    return new Response("Unauthorized", { status: 401, headers });
  }
  ctx.state.data = "myData";
  const resp = await ctx.next();
  resp.headers.set("server", "fresh server");
  return resp;
}

このようにすることで,admin ディレクトリ以下のみで認証を動かすことができる.

同様に他のルーティングでもディレクトリを分けることで別々の middleware ファイルを動かして,異なるユーザ名とパスワードで認証を動かすことができる.

まとめ

middleware 機能を用いることで任意の範囲に認証をかけることができる.

以上だ( `・ω・)b

GitHubで編集を提案

Discussion