ルーティング入門で見たように、レイアウトは異なるルート間でUIとデータローディングロジックを共有する方法です。

ルートに影響を与えずにレイアウトを使用すると便利な場合があります。たとえば、/appと/accountルートは認証が必要で、/aboutページは一般公開されている必要があるかもしれません。これは、丸括弧で囲まれたディレクトリであるルートグループを使用して行うことができます。

accountを(authed)/accountに、appを(authed)/appにリネームして、(authed)グループを作成します。

次に、src/routes/(authed)/+layout.server.jsを作成して、これらのルートへのアクセスを制御できます。

import { redirect } from '@sveltejs/kit';

export function load({ cookies, url }) {
	if (!cookies.get('logged_in')) {
		redirect(303, `/login?redirectTo=${url.pathname}`);
	}
}

これらのページにアクセスしようとすると、/loginルートにリダイレクトされます。このルートには、logged_inクッキーを設定するsrc/routes/login/+page.server.jsのフォームアクションがあります。

また、src/routes/(authed)/+layout.svelteファイルを追加して、これら2つのルートにUIを追加することもできます。

<script>
	let { children } = $props();
</script>

<form method="POST" action="/logout">
	<button>log out</button>
</form>