Working log in/route guard

src/layouts/headers/headerauth.vue

@@ -11,18 +11,23 @@
 
       <!-- Logo -->
       <router-link :to="{ name: 'home' }" class="btn btn-ghost normal-case text-xl">
-        <img src="../../assets/images/1.png" alt="Company Logo" class="h-8 md:h-10 w-auto" />
+      Auburn Oil
       </router-link>
     </div>
 
     <!-- Navbar Center Section (Desktop Search Bar) -->
     <div class="navbar-center hidden lg:flex">
+      <!-- 
+        THIS IS THE ONLY CHANGE NEEDED ON THIS ENTIRE PAGE.
+        We are adding the @input event listener to trigger the search.
+      -->
       <input 
+        id="customer-search-input" 
         type="text" 
-        placeholder="Search Customers..." 
-        class="input input-bordered w-full max-w-xs"
+        placeholder="Search customers..." 
         v-model="searchStore.searchTerm" 
-        @input="searchStore.fetchSearchResults"
+        class="input input-bordered"
+        @input="searchStore.debouncedSearch"
       />
     </div>
 
@@ -34,8 +39,7 @@
       </router-link>
 
       <!-- User Dropdown -->
-      <!-- v-if="employee.id" only renders this block AFTER the API call is successful and an employee ID exists. -->
-      <div v-if="employee.id" class="dropdown dropdown-end">
+      <div v-if="user.user_id" class="dropdown dropdown-end">
         <label tabindex="0" class="btn btn-ghost btn-circle avatar">
           <div class="w-10 rounded-full bg-neutral text-neutral-content flex items-center justify-center">
             <span class="text-lg font-bold">{{ userInitials }}</span>
@@ -45,7 +49,7 @@
           <li class="p-2 font-semibold">{{ user.user_name }}</li>
           <div class="divider my-0"></div>
           <li>
-            <router-link :to="{ name: 'employeeProfile', params: { id: employee.id } }">
+            <router-link :to="{ name: 'employeeProfile', params: { id: user.user_id } }">
               Profile
             </router-link>
           </li>
@@ -54,31 +58,29 @@
       </div>
       <!-- This provides the loading indicator while we wait for the API call to finish. -->
       <div v-else class="px-4">
-        <span class="loading loading-spinner loading-sm"></span>
+       {{user}}
       </div>
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 import axios from 'axios'
 import authHeader from '../../services/auth.header'
 import { useSearchStore } from '../../stores/search' // Adjust path if needed
+import { useAuthStore } from '../../stores/auth'
 
 // Define the shape of your data for internal type safety
 interface User {
   user_name: string;
+  user_id: number;
 }
-interface Employee {
-  id: number;
-}
+
 
 export default defineComponent({
   data() {
     return {
       // Initialize with empty objects to prevent template errors
-      employee: {} as Employee,
       user: {} as User,
     }
   },
@@ -86,6 +88,7 @@ export default defineComponent({
   computed: {
     searchStore() {
       return useSearchStore();
+   
     },
     userInitials(): string {
       if (!this.user || !this.user.user_name) return '';
@@ -97,32 +100,39 @@ export default defineComponent({
   },
 
   created() {
-    this.fetchUserData();
+    this.userStatus();
   },
 
   methods: {
-     fetchUserData() {
-    axios.get('/auth/whoami', { headers: authHeader() })
-      .then((response: any) => {
-        console.log("User Data Response from API:", response.data);
-
-        // This check is now more robust. It only checks for what it truly needs.
-        if (response.data && response.data.ok && response.data.employee && response.data.employee.id) {
-          this.user = response.data.user;
-          this.employee = response.data.employee;
-        } else {
-          console.error("API response was successful, but the expected employee data with an ID is missing.");
-        }
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: "get",
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
       })
-      .catch((error: any) => {
-        console.error("CRITICAL: Failed to fetch user data. The API call itself failed.", error);
-      });
-  },
+        .then((response: any) => {
+          console.log(this.user)
+          if (response.data.ok) {
+            this.user = response.data.user;
+          } else {
+
+            localStorage.removeItem('user');
+            this.$router.push('/login');
+          }
+        })
+
+    },
 
     logout() {
       console.log("Logging out...");
-      // Your full logout logic here
+      // Clear auth data
+      const authStore = useAuthStore();
+      authStore.clearAuth();
+      // Redirect to login
+      this.$router.push({ name: 'login' });
     }
   }
 });
-</script>
+</script>