vamos

components/AuthIndicator.client.vue

@@ -16,24 +16,70 @@
 </template>
 
 <script setup>
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { UserCheck, UserX, Loader, ShieldAlert } from 'lucide-vue-next'
 import { useAuth } from '~/composables/useAuth'
 import { useMusicStore } from '~/stores/music'
 
-const { isAuthenticated, authChecked, isCheckingAuth, authStatus, checkAuth, triggerAuth } = useAuth()
+const {
+  isAuthenticated,
+  authChecked,
+  isCheckingAuth,
+  authStatus,
+  checkAuth,
+  triggerAuth,
+  markUnauthenticated,
+  setupVisibilityListener,
+  cleanupListeners
+} = useAuth()
 const musicStore = useMusicStore()
 
-// Check auth on mount
+// Check auth on mount and setup listeners
 onMounted(async () => {
-  await checkAuth()
+  await checkAuth(true)
+  setupVisibilityListener()
+
+  // Chequea auth cada 30 segundos mientras la pestaña está activa
+  const interval = setInterval(() => {
+    if (!document.hidden) {
+      checkAuth()
+    }
+  }, 30000)
+
+  onUnmounted(() => {
+    clearInterval(interval)
+  })
+})
+
+// Cleanup listeners on unmount
+onUnmounted(() => {
+  cleanupListeners()
 })
 
 // Watch for failed API requests that might indicate auth loss
-watch(() => musicStore.error, (error) => {
-  if (error && (error.includes('401') || error.includes('403') || error.includes('Unauthorized'))) {
-    // Auth might have expired, recheck
-    checkAuth()
+watch(() => musicStore.error, (error, oldError) => {
+  // Solo actuar si es un nuevo error (no el mismo)
+  if (error && error !== oldError) {
+    console.log('[AuthIndicator] Music store error detected:', error)
+
+    if (error.includes('401') || error.includes('403') ||
+        error.includes('Unauthorized') || error.includes('Forbidden')) {
+      // Auth error detected - mark as unauthenticated immediately
+      console.log('[AuthIndicator] Auth error detected, updating status')
+      markUnauthenticated()
+    }
+  }
+}, { immediate: false })
+
+// Watch loading state - cuando termina de cargar, verificar si hubo errores de auth
+watch(() => musicStore.loading, (loading, wasLoading) => {
+  if (wasLoading && !loading && musicStore.error) {
+    // Terminó de cargar con error, verificar si es de auth
+    const error = musicStore.error
+    if (error.includes('401') || error.includes('403') ||
+        error.includes('Unauthorized') || error.includes('Forbidden')) {
+      markUnauthenticated()
+    }
   }
 })