Het implementeren en beheren van routing in een Svelte-toepassing kan op een gestructureerde en flexibele manier door gebruik te maken van gespecialiseerde routingbibliotheken en technieken. Hier volgt een overzicht van de aanpak, inclusief het instellen van dynamische en geneste routes, routebewaking (guards) en de implementatie van authenticatie-eisen. 1. Aanbevolen Bibliotheek: - **SvelteKit** (indien je een fullstack framework gebruikt): biedt ingebouwde routing met file-based structuur, dynamische routes en nested routes. - **Svelte Routing Libraries**: - **svelte-spa-router**: geschikt voor single-page applicaties, ondersteunt dynamische en geneste routes, en routebewakers. - **tinro**: moderne router voor Svelte, eenvoudig te gebruiken, ondersteunt dynamische routes en guards. 2. Basisimplementatie met svelte-spa-router: a. Installatie: ```bash npm install svelte-spa-router ``` b. Routing configuratie: Maak een routebestand (bijvoorbeeld `routes.js`): ```js import Home from './routes/Home.svelte'; import Dashboard from './routes/Dashboard.svelte'; import Login from './routes/Login.svelte'; import UserProfile from './routes/UserProfile.svelte'; const routes = { '/': Home, '/login': Login, '/dashboard': Dashboard, '/user/:id': UserProfile, // dynamische route // Geneste routes kunnen worden afgehandeld door nested componenten }; export default routes; ``` c. Router gebruiken in je hoofdcomponent: ```svelte <script> import { Router } from 'svelte-spa-router'; import routes from './routes.js'; // eventueel bijhouden van auth status let isAuthenticated = false; // of haal dit uit een store </script> <Router {routes} let:segment> {#if segment.route === '/dashboard' && !isAuthenticated} <Redirect to="/login" /> {/if} </Router> ``` 3. Dynamische Routes - Gebruik parameters zoals `/user/:id`. In je component kun je de parameter ophalen: ```svelte <script> import { useParams } from 'svelte-spa-router'; const { id } = useParams(); </script> ``` 4. Geneste Routes - Svelte-spa-router ondersteunt niet direct nested routing zoals in React Router, maar je kunt geneste routes simuleren door in een component andere routers te embedden of door conditioneel componenten te laden op basis van de route. 5. Routebewakers (Guards) - Om routes te beveiligen, kun je conditionele logica toevoegen vóór het renderen van een route: ```svelte <script> import { wrap } from 'svelte-spa-router/wrap'; const ProtectedRoute = wrap({ component: Dashboard, conditions: [ () => { // controleer of gebruiker is ingelogd return isAuthenticated; // bijvoorbeeld uit een store } ], userData: { redirectTo: '/login' } }); </script> <Router routes={{ '/dashboard': ProtectedRoute, // andere routes }} /> ``` 6. Best Practices en Overwegingen - Gebruik stores (zoals Svelte's `writable`) om authenticatiestatus en gebruikersgegevens centraal te beheren. - Implementeer redirects binnen route guards voor beveiligde routes. - Overweeg SvelteKit als je meer ingebouwde routing- en server-side mogelijkheden wilt. - Documenteer je route-structuur en gebruik consistente naming. Door deze technieken toe te passen, kun je een flexibele, beveiligde en schaalbare routingstructuur opzetten voor jouw Svelte-toepassing.

Voor routing in je Svelte-toepassing raad ik **SvelteKit** aan, het officiële framework voor Svelte. Hieronder beschrijf ik de implementatie volgens best practices: ## 1. Basis Setup ```bash npm create svelte@latest mijn-app cd mijn-app npm install ``` ## 2. Bestandsstructuur voor Routing ``` src/routes/ ├── +layout.svelte ├── +page.svelte ├── /login │ └── +page.svelte ├── /dashboard │ ├── +layout.svelte │ ├── +page.svelte │ └── /profiel │ └── +page.svelte ├── /blog │ ├── +page.svelte │ └── [slug] │ └── +page.svelte └── /admin ├── +layout.svelte └── +page.svelte ``` ## 3. Dynamische Routes ```svelte <!-- src/routes/blog/[slug]/+page.svelte --> <script> import { page } from '$app/stores'; export let data; const { post } = data; </script> <h1>{post.title}</h1> <p>{post.content}</p> ``` ```javascript // src/routes/blog/[slug]/+page.js export async function load({ params }) { const { slug } = params; // Haal data op basis van slug const post = await getPostBySlug(slug); return { post }; } ``` ## 4. Geneste Routes ```svelte <!-- src/routes/dashboard/+layout.svelte --> <script> import { page } from '$app/stores'; </script> <nav> <a href="/dashboard" class:active={$page.url.pathname === '/dashboard'}> Overzicht </a> <a href="/dashboard/profiel" class:active={$page.url.pathname === '/dashboard/profiel'}> Profiel </a> </nav> <main> <slot /> </main> ``` ## 5. Routebewakers (Authentication) ```javascript // src/hooks.server.js import { redirect } from '@sveltejs/kit'; export async function handle({ event, resolve }) { const token = event.cookies.get('auth-token'); const user = await validateToken(token); event.locals.user = user; // Bescherm beveiligde routes if (event.url.pathname.startsWith('/dashboard') && !user) { throw redirect(302, '/login'); } // Redirect ingelogde gebruikers van login pagina if (event.url.pathname === '/login' && user) { throw redirect(302, '/dashboard'); } return resolve(event); } ``` ```javascript // src/routes/dashboard/+layout.server.js export function load({ locals }) { if (!locals.user) { throw redirect(302, '/login'); } return { user: locals.user }; } ``` ## 6. Authentication Store ```javascript // src/stores/auth.js import { writable } from 'svelte/store'; import { browser } from '$app/environment'; export const user = writable(browser && JSON.parse(localStorage.getItem('user')) || null); user.subscribe(value => { if (browser) { localStorage.setItem('user', JSON.stringify(value)); } }); ``` ## 7. Login Component ```svelte <!-- src/routes/login/+page.svelte --> <script> import { goto } from '$app/navigation'; import { user } from '$stores/auth'; let email = ''; let password = ''; let error = ''; async function handleLogin() { try { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }) }); if (response.ok) { const userData = await response.json(); user.set(userData); goto('/dashboard'); } else { error = 'Ongeldige inloggegevens'; } } catch (err) { error = 'Inloggen mislukt'; } } </script> <form on:submit|preventDefault={handleLogin}> <input type="email" bind:value={email} placeholder="Email" required> <input type="password" bind:value={password} placeholder="Wachtwoord" required> <button type="submit">Inloggen</button> {#if error}<p class="error">{error}</p>{/if} </form> ``` ## 8. Aanbevolen Bibliotheken - **SvelteKit**: Officiële routing oplossing - **@sveltejs/kit**: Standaard meegeleverd - **JSON Web Tokens**: Voor authentication - **Lucia Auth**: Lightweight auth library voor SvelteKit ## 9. Best Practices 1. Gebruik `+layout.server.js` voor server-side route protection 2. Implementeer loading states met `+loading.svelte` 3. Gebruik `handle` in `hooks.server.js` voor globale auth checks 4. Sla gevoelige data niet op in client-side stores 5. Gebruik HTTP-only cookies voor tokens Deze aanpak zorgt voor een veilige en schaalbare routing structuur met goede gebruikerservaring.