fix: streamline authentication check on dashboard mount and improve routing logic

pages/dashboard/index.vue

@@ -21,26 +21,35 @@ definePageMeta({
   middleware: 'auth'
 });
 
-const { user, userTier, isAuthenticated } = useAuth();
+const { user, userTier, isAuthenticated, checkAuth } = useAuth();
 const loading = ref(true);
+const authChecked = ref(false);
 
-// Route to tier-specific dashboard
+// Check authentication on mount
-watchEffect(async () => {
+onMounted(async () => {
+  console.log('🔄 Dashboard mounted, checking authentication...');
+  
+  // Ensure auth is checked before routing
+  await checkAuth();
+  authChecked.value = true;
+  
+  console.log('✅ Auth check complete:', { 
+    isAuthenticated: isAuthenticated.value, 
+    user: user.value?.email,
+    tier: userTier.value 
+  });
+  
+  // Now route based on auth status
   if (isAuthenticated.value && user.value) {
     const tierRoute = `/dashboard/${userTier.value}`;
     console.log('🔄 Routing to tier-specific dashboard:', tierRoute);
     await navigateTo(tierRoute, { replace: true });
-  } else if (!isAuthenticated.value) {
+  } else {
     console.log('🔄 User not authenticated, redirecting to login');
     await navigateTo('/login');
   }
-});
+  
-
+  loading.value = false;
-onMounted(() => {
-  // Small delay to ensure auth state is loaded
-  setTimeout(() => {
-    loading.value = false;
-  }, 500);
 });
 </script>