telepost/frontend/src/routes/posts/+layout.svelte

<script>
  import { browser } from '$app/environment';
  import { goto, page } from '$app/stores';
  import { onMount } from 'svelte';
  import { isAuthenticated, validateToken } from '$lib/utils/auth.js';

  let loading = true;
  let authorized = false;

  onMount(async () => {
    // Check authentication only in browser
    if (browser) {
      const authenticated = isAuthenticated();
      if (!authenticated) {
        // Redirect to login if not authenticated
        goto('/login');
        return;
      }

      // Optionally validate token with backend
      const tokenValid = await validateToken();
      if (!tokenValid) {
        // If token is invalid, clear it and redirect to login
        localStorage.removeItem('token');
        goto('/login');
        return;
      }

      authorized = true;
    }
    loading = false;
  });
</script>

{#if loading}
  <div class="loading">Checking authentication...</div>
{:else}
  {#if authorized}
    <slot />
  {:else}
    <div class="unauthorized">Access denied. Redirecting...</div>
  {/if}
{/if}

<style>
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 1.2rem;
    color: #666;
  }

  .unauthorized {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 1.2rem;
    color: #dc3545;
  }
</style>