Improved: synced app state on logout

hotwax · Oct 10, 2023 · 98511a5 · 98511a5
1 parent a01add4
commit 98511a5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/store/auth.ts b/src/store/auth.ts
@@ -22,7 +22,7 @@ export const useAuthStore = defineStore('authStore', {
         const currTime = DateTime.now().toMillis();
         isTokenExpired = state.token.expiration < currTime;
       }
-      return state.token.value && !isTokenExpired;
+      return !!(state.token.value && !isTokenExpired);
     },
     getOMS: (state) => state.oms,
     getBaseUrl: (state) => {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -14,7 +14,7 @@
               <p class="overline">{{ authStore.getOMS }}</p>
               <h2>{{ authStore.current?.partyName ? authStore.current?.partyName : authStore.current.userLoginId }}</h2>
             </ion-label>
-            <ion-button fill="outline" color="medium" slot="end" @click="authStore.logout()">{{ $t('Logout') }}</ion-button>
+            <ion-button fill="outline" color="medium" slot="end" @click="logout()">{{ $t('Logout') }}</ion-button>
           </ion-item>
           <ion-button v-else slot="end" fill="outline" color="danger" @click="login()">
             <ion-icon slot="start" :icon="personCircleOutline"/>
@@ -65,9 +65,9 @@ import { defineComponent, ref } from 'vue';
 import {
   codeWorkingOutline,
   lockClosedOutline,
+  personCircleOutline,
   rocketOutline,
-  shieldHalfOutline,
-  personCircleOutline
+  shieldHalfOutline
 } from 'ionicons/icons';
 import { useAuthStore } from '@/store/auth';
 import { useRouter } from "vue-router";
@@ -93,8 +93,17 @@ export default defineComponent({
       // and the user logs in through one and tries to login again from the next tab
       // $hydate will resync the state and hence, update the app UI
       this.authStore.$hydrate({ runHooks: false })
-      if (this.authStore.isAuthenticated) return
-      this.router.push('/login')
+      // push to login only if user is not logged in (after state hydration)
+      if (!this.authStore.isAuthenticated) {
+        this.router.push('/login')
+      }
+    },
+    async logout() {
+      this.authStore.$hydrate({ runHooks: false })
+      // hydrate and logout only if user is logged in (authenticated)
+      if (this.authStore.isAuthenticated) {
+        await this.authStore.logout()
+      }
     }
   },
   setup() {
@@ -230,9 +239,6 @@ export default defineComponent({
     object-fit: cover;
   }
 
-  .app-content {
-  }
-
   ion-card {
     border-radius: 40px;
     transition: .4s cubic-bezier(0.59, 0.08, 0.05, 1.4);