- Integrated Authentik OAuth/OIDC authentication - Added PWA functionality with offline support - Created protected and public API endpoints - Configured Docker deployment with Traefik - Added Gitea Actions CI/CD workflow - Included comprehensive setup documentation
59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: 'auth'
|
|
})
|
|
|
|
const { user } = useUserSession()
|
|
|
|
// Este endpoint está protegido y requiere autenticación
|
|
const { data: protectedData, error } = await useFetch('/api/protected')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen">
|
|
<header class="border-b border-gray-200 dark:border-gray-800">
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div class="flex items-center gap-4">
|
|
<UButton
|
|
icon="i-heroicons-arrow-left"
|
|
variant="ghost"
|
|
to="/"
|
|
/>
|
|
<h1 class="text-2xl font-bold">Dashboard</h1>
|
|
</div>
|
|
<UserMenu />
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 py-8">
|
|
<div class="space-y-6">
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="text-xl font-semibold">Panel de Control</h2>
|
|
</template>
|
|
|
|
<p>Esta página está protegida por el middleware de autenticación.</p>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="font-semibold">Datos Protegidos de la API</h3>
|
|
</template>
|
|
|
|
<div v-if="error" class="text-red-500">
|
|
Error al cargar datos: {{ error.message }}
|
|
</div>
|
|
|
|
<div v-else-if="protectedData">
|
|
<pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded overflow-auto text-sm">{{ JSON.stringify(protectedData, null, 2) }}</pre>
|
|
</div>
|
|
|
|
<div v-else>
|
|
Cargando datos protegidos...
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|