Remixのresource routeをリダイレクト用途で使う

Resource Routes とは

Remixでは「特定のUIを定義せずにデータを返却するだけのroute」すなわちResource Routes という機能が備わっています。例えば、公式ドキュメントではPDFをダウンロードする用途が紹介されています。

remix.run

今回は、この resource route をリダイレクト用途で使うと便利だよ、というのを紹介します。

サンプルユースケース

例えば、以下のようなユーザーのアクセス制御をしたい場合にリダイレクト専用の resource route を定義できます。

• 未ログインのユーザーはアクセスさせたくない
• ログイン済みでもサブスク会員じゃないとアクセスさせたくない

// http://localhost:3000/guard

export async function loader() {
  const session = await authenticator.isAuthenticated(request)
  if (!session) return {
    redirect('/auth/login')
  }

  const user = await prisma.user.findUnique({
    where: {
      id: session.userId,
    },
  })
  if (!user) {
    return redirect('/auth/login')
  }

  if (!user.hasMembership) {
    return redirect(`/membership`)
  }

  return redirect('/auth/logged-in')
}

上記のloaderを /guard の route.tsx からexportします。 Remix は Nested Routes なので上記の例で言うと /guard 配下にアクセス制御したいrouteを配置すれば(/guard/hoge, /guard/hoge/fugaなど)、各routeに制御処理を書かずともアクセス制御を実現できます。

ユーザーのアクセス制御について紹介しましたが、他にも以下のような用途で利用できます。

• 認証認可などのコールバック処理をする
• 署名付きの一時URLでアクセスしてきたユーザーに対して、そのURLの妥当性を検証する

データを返却するエンドポイントを作る際に便利なresource routeですが、リダイレクトの用途でも非常に役立ちます。