#28 feat(api): add logout.

src/components/Login.vue

@@ -1,3 +1,12 @@
+<template>
+  <h1>Login</h1>
+  <v-form @submit.prevent="login">
+    <v-text-field v-model="username" label="Usuario" required />
+    <v-text-field v-model="password" label="Contraseña" type="password" required />
+    <v-btn type="submit">Entrar</v-btn>
+    <v-alert v-if="error" type="error">{{ error }}</v-alert>
+  </v-form>
+</template>
 <script setup>
   import { ref } from 'vue';
   import AuthService from '@/services/auth';
@@ -10,33 +19,8 @@
   async function login() {
     try {
       await AuthService.login({ username: username.value, password: password.value });
-      // opcional: redirigir al dashboard
     } catch (e) {
       error.value = e.message;
     }
   }
-
-  // ejemplo de llamada a clientes (requiere token)
-  const api = inject('api');
-
-  async function loadCustomers() {
-    try {
-      const data = await api.getCustomers();
-      console.log(data);
-    } catch (e) {
-      console.error(e);
-    }
-  }
 </script>
-
-<template>
-  <h1>Login</h1>
-  <v-form @submit.prevent="login">
-    <v-text-field v-model="username" label="Usuario" required />
-    <v-text-field v-model="password" label="Contraseña" type="password" required />
-    <v-btn type="submit">Entrar</v-btn>
-    <v-alert v-if="error" type="error">{{ error }}</v-alert>
-  </v-form>
-
-  <v-btn @click="loadCustomers">Cargar clientes</v-btn>
-</template>

src/components/Logout.vue

@@ -0,0 +1,29 @@
+<style scoped>
+p {
+  font-size: 1.1rem;
+  color: #555;
+}
+</style>
+<template>
+  <v-container class="d-flex flex-column align-center justify-center" style="height: 100vh;">
+    <v-progress-circular indeterminate color="primary" />
+    <p class="mt-4">Cerrando sesión…</p>
+  </v-container>
+</template>
+<script>
+  import AuthService from '@/services/auth';
+  export default {
+    name: 'DonConfiao',
+    mounted() {
+      this.logout();
+    },
+    methods: {
+      logout() {
+        AuthService.logout();
+        this.$router.push({
+          path: "/autenticarse"
+        });
+      },
+    },
+  };
+</script>

src/components/NavBar.vue

@@ -50,6 +50,7 @@
          menuItems: [
              { title: 'Inicio', route: '/', icon: 'mdi-home'},
              { title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
+             { title: 'Salir', route:'/salir', icon: 'mdi-cart'},
          ],
          menuAdminItems: [
              { title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},