src/pages/login.vue

@@ -48,8 +48,8 @@ const isSnackbarVisibility = ref(false)
 const useUserStore = userStore()
 
 const login = async () => {
-  // update the userStore with the user data
-  useUserStore.login(credentials.value.username, credentials.value.password, ability)
+  try {
+    await useUserStore.login(credentials.value.username, credentials.value.password, ability)
 
     // Redirect to `to` query if exist or redirect to index route
     // ❗ nextTick is required to wait for DOM updates and later redirect
@@ -57,6 +57,10 @@ const login = async () => {
       router.replace(route.query.to ? String(route.query.to) : '/')
     })
   }
+  catch (err) {
+    isSnackbarVisibility.value = true
+  }
+}
 
 const onSubmit = () => {
   refVForm.value?.validate()

src/stores/user.store.ts

@@ -29,8 +29,9 @@ export const userStore = defineStore('user', {
         useCookie('userAbilityRules').value = rules
         ability.update(rules)
       }
-      catch (err) {
-        console.error(err)
+      catch (err: any) {
+        console.log(err.message)
+        throw err // Rethrow the error so it can be caught in the component
       }
     },
     logout() {

src/utils/api.ts

@@ -7,8 +7,9 @@ export const $api = ofetch.create({
     if (accessToken) {
       options.headers = {
         ...options.headers,
-        'Authorization': `Bearer ${accessToken}`,
-        'Cache-Control': 'no-cache',
+        Authorization: `Bearer ${accessToken}`,
+
+        // 'Cache-Control': 'no-cache',
       }
     }
   },