正如我们在路由介绍中看到的，布局是一种在不同路由之间共享 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 路由，该路由在 src/routes/login/+page.server.js 中有一个表单 action，用于设置 logged_in cookie。

我们还可以通过添加一个 src/routes/(authed)/+layout.svelte 文件来为这两个路由添加一些 UI：

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

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

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

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