auth

components/layout/Header.vue

@@ -300,7 +300,7 @@
                                         alt=""
                                     />
                                 </button>
-                                <template #content="{ close }">
+                                <template #content="{ close }" v-if="user">
                                     <ul class="w-[230px] !py-0 font-semibold text-dark dark:text-white-dark dark:text-white-light/90">
                                         <li>
                                             <div class="flex items-center px-4 py-4">
@@ -309,12 +309,12 @@
                                                 </div>
                                                 <div class="truncate ltr:pl-4 rtl:pr-4">
                                                     <h4 class="text-base">
-                                                        John Doe<span class="rounded bg-success-light px-1 text-xs text-success ltr:ml-2 rtl:ml-2">Pro</span>
+                                                        {{ user.username }}<span class="rounded bg-success-light px-1 text-xs text-success ltr:ml-2 rtl:ml-2">Pro</span>
                                                     </h4>
                                                     <a
                                                         class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white"
                                                         href="javascript:;"
-                                                        >johndoe@gmail.com</a
+                                                        >{{ user.email }}</a
                                                     >
                                                 </div>
                                             </div>
@@ -341,11 +341,11 @@
                                             </NuxtLink>
                                         </li>
                                         <li class="border-t border-white-light dark:border-white-light/10">
-                                            <NuxtLink to="/auth/boxed-signin" class="!py-3 text-danger" @click="close()">
+                                            <a href="javascript:;" class="!py-3 text-danger" @click="signOut()">
                                                 <icon-logout class="h-4.5 w-4.5 shrink-0 rotate-90 ltr:mr-2 rtl:ml-2" />
 
                                                 Sign Out
-                                            </NuxtLink>
+                                            </a>
                                         </li>
                                     </ul>
                                 </template>
@@ -371,6 +371,8 @@
     const route = useRoute();
     const search = ref(false);
     const { setLocale } = useI18n();
+    const auth = useAuthStore();
+    const router = useRouter();
 
     // multi language
     const changeLanguage = (item: any) => {
@@ -468,4 +470,25 @@
     const removeMessage = (value: number) => {
         messages.value = messages.value.filter((d) => d.id !== value);
     };
+
+    const { data: user, error } = await useAsyncData('user-me', async () => {
+        try {
+            const us = await auth.fetchUser(); 
+            console.log('User data fetched:', us);
+            return us;
+        } catch (e) {
+            console.warn('Failed to fetch user:', e);
+            return null;
+        }
+    });
+
+    const signOut = async () => {
+        try {
+            await auth.logout();
+        } catch (err) {
+            console.error('Logout failed:', err);
+        } finally {
+            router.push('/');
+        }
+    };
 </script>