Authenticated routes

For protected route trees, use a wrapper route that prepares authentication state once and controls how children render.

import { r } from '@plumile/router';

import {
  AccountPageResource,
  LoginPageResource,
  ProtectedShellResource,
} from './common/resources.js';
import { prepareAuthStatus, prepareLoginPage } from './common/prepares.js';
import { renderAuthenticatedRoute } from './common/renders.js';

export const routes = [
  r({
    path: '',
    resourcePage: ProtectedShellResource,
    prepare: prepareAuthStatus,
    render: renderAuthenticatedRoute,
    children: [
      r({
        path: 'account',
        resourcePage: AccountPageResource,
      }),
    ],
  }),
  r({
    path: 'login',
    resourcePage: LoginPageResource,
    prepare: prepareLoginPage,
  }),
];

Keep auth checks in the wrapper prepare/render pair. Child routes can focus on their own data and UI once the wrapper has established whether the user is allowed to see protected content.