ルートグループを使った認証システム（計画中）

src/routes/
├── (public)/              # 🌐 認証不要エリア
│   ├── +layout.svelte     # 公開用レイアウト
│   ├── +page.svelte       # ホームページ
│   ├── about/
│   │   └── +page.svelte
│   ├── blog/
│   │   ├── +page.svelte
│   │   └── [slug]/
│   │       └── +page.svelte
│   └── pricing/
│       └── +page.svelte
│
├── (auth)/                # 🔒 認証必須エリア
│   ├── +layout.server.ts  # 認証チェック
│   ├── +layout.svelte     # 認証済みレイアウト
│   ├── dashboard/
│   │   └── +page.svelte
│   ├── profile/
│   │   ├── +page.svelte
│   │   └── +page.server.ts
│   └── settings/
│       ├── +page.svelte
│       └── +page.server.ts
│
├── (admin)/               # 👑 管理者専用エリア
│   ├── +layout.server.ts  # 管理者権限チェック
│   ├── +layout.svelte
│   ├── users/
│   │   ├── +page.svelte
│   │   └── [id]/
│   │       └── +page.svelte
│   └── system/
│       └── +page.svelte
│
├── login/                 # 認証ページ（グループ外）
│   ├── +page.svelte
│   └── +page.server.ts
├── register/
│   ├── +page.svelte
│   └── +page.server.ts
└── logout/
    └── +server.ts

import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals, url, cookies }) => {
  // hooks.server.tsで設定されたlocals.userを確認
  // localsはリクエスト全体で共有されるオブジェクトで、
  // 認証情報を保持するのに最適な場所です
  if (!locals.user) {
    // 未認証の場合、現在のURLを保存してログインページへリダイレクト
    // fromパラメータにより、ログイン後に元のページに戻れます
    const redirectTo = url.pathname + url.search;
    throw redirect(303, `/login?from=${encodeURIComponent(redirectTo)}`);
  }
  
  // 認証済みユーザー情報を子コンポーネントに渡す
  // この情報は+page.svelteやその他の子コンポーネントで利用可能
  return {
    user: locals.user,
    session: locals.session
  };
};

import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals, parent }) => {
  // parent()関数を呼び出すことで、親グループ（auth）のload関数を実行
  // これにより、まず基本的な認証チェックが行われます
  // 認証されていない場合は、この時点でリダイレクトされます
  const parentData = await parent();
  
  // 認証チェックをパスした後、追加で管理者権限を確認
  // rolesプロパティがない、またはadminロールを持たない場合は拒否
  if (!locals.user?.roles?.includes('admin')) {
    // 403 Forbiddenエラーを投げることで、権限不足を明示
    // 401（Unauthorized）ではなく403を使うのは、
    // 認証済みだが権限が不足していることを示すため
    throw error(403, {
      message: '管理者権限が必要です',
      code: 'ADMIN_REQUIRED'
    });
  }
  
  // 親データを継承しつつ、管理者固有の情報を追加
  return {
    ...parentData,
    admin: true,
    adminPermissions: locals.user.permissions
  };
};

// src/routes/(role-[role])/+layout.server.ts
// 動的な役割チェック（例：(role-editor)、(role-viewer)等）
// この方式により、新しい役割を追加する際に新しいコードを書く必要がありません

import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals, parent, params }) => {
  const parentData = await parent();
  
  // URLパラメータから必要な役割を動的に取得
  // 例：(role-editor)の場合、params.role = 'editor'
  const requiredRole = params.role;
  
  // ユーザーが必要な役割を持っているか確認
  if (!locals.user?.roles?.includes(requiredRole)) {
    throw error(403, {
      message: `${requiredRole}権限が必要です`,
      code: 'INSUFFICIENT_PERMISSION'
    });
  }
  
  // 役割情報を追加して返す
  return {
    ...parentData,
    role: requiredRole
  };
};

<script lang="ts">
  import Header from '$lib/components/PublicHeader.svelte';
  import Footer from '$lib/components/Footer.svelte';
  import type { Snippet } from 'svelte';
  
  // Svelte 5の新しいprops構文を使用
  // childrenはSnippet型で、子コンポーネントのコンテンツを表します
  let { children }: { children?: Snippet } = $props();
</script>

<div class="public-layout">
  <!-- 公開用ヘッダー：ログインリンクなどを含む -->
  <Header />
  
  <main>
    <!-- 子ページのコンテンツをレンダリング -->
    {@render children?.()}
  </main>
  
  <!-- 共通フッター -->
  <Footer />
</div>

<script lang="ts">
  import Sidebar from '$lib/components/Sidebar.svelte';
  import UserMenu from '$lib/components/UserMenu.svelte';
  import type { PageData } from './$types';
  import type { Snippet } from 'svelte';
  
  // load関数から渡されたデータ（ユーザー情報を含む）を受け取る
  let { data, children }: { data: PageData; children?: Snippet } = $props();
</script>

<div class="authenticated-layout">
  <!-- ユーザー固有のナビゲーションを表示するサイドバー -->
  <Sidebar user={data.user} />
  
  <div class="content">
    <!-- ユーザープロファイルとログアウトオプションを含むメニュー -->
    <UserMenu user={data.user} />
    
    <main>
      <!-- 子ページのコンテンツ -->
      {@render children?.()}
    </main>
  </div>
</div>

// src/app.d.ts
// SvelteKitのグローバル名前空間を拡張して、
// アプリケーション固有の型を定義します
declare global {
  namespace App {
    // Localsインターフェース：リクエスト全体で共有されるデータ
    interface Locals {
      // ユーザー情報（認証済みの場合のみ存在）
      user?: {
        id: string;
        email: string;
        name: string;
        roles: string[];        // ユーザーの役割（admin、editor等）
        permissions?: string[]; // 詳細な権限リスト（オプション）
      };
      // セッション情報
      session?: {
        id: string;
        expiresAt: Date;       // セッションの有効期限
      };
    }
    
    // PageData：ページコンポーネントに渡されるデータの型
    interface PageData {
      user?: App.Locals['user'];  // ユーザー情報
      admin?: boolean;             // 管理者フラグ
      role?: string;               // 現在の役割
    }
    
    // Error：カスタムエラー情報の型
    interface Error {
      code?: string;       // エラーコード（ADMIN_REQUIRED等）
      details?: unknown;   // 追加のエラー詳細
    }
  }
}

export {};

// Cookie/Session + ルートグループの組み合わせ
// (auth)/+layout.server.ts
// Cookie/Session認証の安全性とルートグループの構造的明確性を両立
export const load: LayoutServerLoad = async ({ cookies }) => {
  // Cookieからセッショントークンを取得して検証
  const session = await validateSession(cookies.get('session'));
  if (!session) {
    // 未認証の場合はログインページへリダイレクト
    throw redirect(303, '/login');
  }
  // 認証済みユーザー情報を返す
  return { user: session.user };
};

// JWT + ルートグループの組み合わせ
// (api)/+layout.server.ts
// APIルート専用のJWT認証をルートグループで管理
export const load: LayoutServerLoad = async ({ request }) => {
  // AuthorizationヘッダーからBearerトークンを抽出
  const token = request.headers.get('Authorization')?.replace('Bearer ', '');
  
  // JWTトークンを検証
  const user = await verifyJWT(token);
  if (!user) {
    // 401 Unauthorizedエラーを返す（APIなのでリダイレクトしない）
    throw error(401, 'Unauthorized');
  }
  
  return { user };
};

(public)/       # マーケティングサイト
(app)/          # アプリケーション（認証必須）
(admin)/        # 管理画面
(api)/          # APIエンドポイント

(shop)/         # 商品閲覧（認証不要）
(account)/      # アカウント管理（認証必須）
(checkout)/     # 決済（部分認証）
(vendor)/       # 出品者管理

(browse)/       # コンテンツ閲覧
(member)/       # メンバー限定
(creator)/      # クリエイター管理
(moderator)/    # モデレーター