feat: controlar visibilidad de botones según autenticación en Wellcome

- Agregar lógica condicional para mostrar botón 'Ir a Comprar' solo a usuarios admin autenticados
- Reordenar botones: 'Ver Catálogo' primero, 'Ir a Comprar' segundo
- Importar y usar useAuthStore para verificar isAuthenticated e isAdmin
- 'Ver Catálogo' siempre visible para todos los usuarios
- 'Ir a Comprar' visible solo cuando isAuthenticated && isAdmin

src/components/Wellcome.vue

@@ -87,16 +87,6 @@
         <v-col cols="12" class="text-center">
           <h2 class="text-h5 font-weight-bold mb-4">¿Qué deseas hacer?</h2>
           <div class="d-flex flex-wrap justify-center ga-4">
-            <v-btn
-              :to="{ path: 'comprar' }"
-              color="green"
-              size="x-large"
-              prepend-icon="mdi-cart"
-              variant="elevated"
-              class="px-8"
-            >
-              Ir a Comprar
-            </v-btn>
             <v-btn
               :to="{ path: 'catalog' }"
               color="primary"
@@ -107,6 +97,17 @@
             >
               Ver Catálogo
             </v-btn>
+            <v-btn
+              v-if="authStore.isAuthenticated && authStore.isAdmin"
+              :to="{ path: 'comprar' }"
+              color="green"
+              size="x-large"
+              prepend-icon="mdi-cart"
+              variant="elevated"
+              class="px-8"
+            >
+              Ir a Comprar
+            </v-btn>
           </div>
         </v-col>
       </v-row>
@@ -116,7 +117,10 @@
 
 <script setup>
 import ResaltedText from "@/components/ResaltedText.vue";
+import { useAuthStore } from '@/stores/auth';
 import logo from "@/assets/logo_colorful.png";
+
+const authStore = useAuthStore();
 </script>
 
 <style scoped>