Hanzo_dev
9dafed72eb
- Agrega LoginView con formulario de acceso - Agrega store de auth (Pinia) con estado isAuthenticated - Protege todas las rutas con beforeEach, redirige a /login si no autenticado - App.vue oculta nav/sidebar en rutas públicas - TopAppBar incluye botón de cerrar sesión Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<div class="bg-canvas min-h-screen text-ink selection:bg-accent/20 selection:text-accent">
|
|
|
|
<template v-if="isAuthenticated">
|
|
<SideNavBar />
|
|
<TopAppBar />
|
|
<main class="ml-60 pt-16 pb-12 px-8 min-h-screen">
|
|
<div class="max-w-7xl mx-auto pt-8">
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</router-view>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<router-view />
|
|
</template>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { storeToRefs } from 'pinia'
|
|
import { useAuthStore } from './stores/auth.js'
|
|
import SideNavBar from './components/SideNavBar.vue'
|
|
import TopAppBar from './components/TopAppBar.vue'
|
|
|
|
const auth = useAuthStore()
|
|
const { isAuthenticated } = storeToRefs(auth)
|
|
</script>
|
|
|
|
<style>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|