#124 add token cleanup on 403 error

Author: Kreezag

pages/login.vue

@@ -12,6 +12,7 @@ const store = useProfileStore();
 const { authLogicUrl } = storeToRefs(useSettingsStore());
 
 if (store.isAuthenticated) {
+  setPageLayout("default");
   await navigateTo("/");
 }
 

src/shared/lib/use-events/use-events-api.ts

@@ -86,8 +86,8 @@ export const useEventsApi = (): TUseEventsApi => {
         // NOTE: clear cached events hardly
         eventsStore.removeAll();
       }
-    }).catch((err) => {
-      console.error('getAll err', err);
+    }).catch((e) => {
+      console.error(e);
     })
   }
 

src/shared/stores/profile/profile-store.ts

@@ -1,12 +1,13 @@
 import { defineStore } from "pinia";
+import {navigateTo} from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import {REST_API_URL} from "../../lib/io/constants";
 import type {TProfile} from "../../types";
 import {getStoredToken, removeStoredToken, setStoredToken} from "./local-storage-actions";
 
 
 export const useProfileStore = defineStore("profileStore", {
   state: () => ({
-    token: '' as string,
+    token: null as string | null,
     profile: undefined as TProfile | undefined,
   }),
   getters: {
@@ -24,6 +25,18 @@ export const useProfileStore = defineStore("profileStore", {
       const profile = await fetch(`${REST_API_URL}/api/me`, {
         headers: {"X-Auth-Token": this.token || ""}
       })
+        .then((response) => {
+          if (!response.ok && response.status === 403) {
+            this.removeToken();
+
+            // TODO: add toast to show error
+            console.error('Auth Error', response.status, response.statusText)
+
+            navigateTo('/login')
+          }
+
+          return response
+        })
         .then((response) => response.json())
         .catch((e) => {
           console.error(e);
@@ -40,7 +53,10 @@ export const useProfileStore = defineStore("profileStore", {
     },
     getStoredToken(): string {
       const token = getStoredToken()
-      this.setToken(token);
+
+      if (token) {
+        this.setToken(token);
+      }
 
       return token
     },

src/widgets/ui/page-layout/page-layout.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
 const { events, cachedEvents } = useEvents();
 
 const isEventsPaused = computed(
-  () => cachedEvents.idsByType.value[props.type]?.length > 0
+  () => cachedEvents.idsByType.value[props.type]?.length > 0,
 );
 
 const allEvents = computed(() => {
@@ -35,13 +35,13 @@ const visibleEvents = computed(() => {
   }
 
   return allEvents.value.filter(({ uuid }) =>
-    cachedEvents.idsByType.value[props.type]?.includes(uuid)
+    cachedEvents.idsByType.value[props.type]?.includes(uuid),
   );
 });
 
 watchEffect(() => {
   useTitle(
-    `${props.title || "Events"}: ${allEvents.value.length} | Buggregator`
+    `${props.title || "Events"}: ${allEvents.value.length} | Buggregator`,
   );
 });
 </script>
@@ -67,7 +67,7 @@ watchEffect(() => {
 @import "src/assets/mixins";
 
 .page-layout {
-  @apply flex flex-col h-full
+  @apply flex flex-col h-full w-full;
 }
 
 .page-layout__events {