Improved: sync app state on login click in multiple tabs

src/store/auth.ts

@@ -22,7 +22,7 @@
         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) => {
@@ -45,7 +45,7 @@
         const resp = await UserService.login(username, password);
         if (hasError(resp)) {
           showToast(translate('Sorry, your username or password is incorrect. Please try again.'));
           console.error("error", resp.data._ERROR_MESSAGE_);
           return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
         }
 
@@ -65,7 +65,7 @@
         // If any of the API call in try block has status code other than 2xx it will be handled in common catch block.
         // TODO Check if handling of specific status codes is required.
         showToast(translate('Something went wrong while login. Please contact administrator.'));
         console.error("error: ", error);
         return Promise.reject(new Error(error))
       }
     },
@@ -82,7 +82,7 @@
         // If any of the API call in try block has status code other than 2xx it will be handled in common catch block.
         // TODO Check if handling of specific status codes is required.
         showToast(translate('Something went wrong while login. Please contact administrator.'));
         console.error("error: ", error);
         return Promise.reject(new Error(error))
       }
     },

src/views/Home.vue

@@ -1,7 +1,6 @@
 <template>
   <ion-page>
     <ion-content>
-
       <header>
         <h1 class="title">
           {{ $t('Launch Pad') }}
@@ -25,17 +24,17 @@
         <div class="type" v-for="category in Object.keys(appCategory)" :key="category">
           <h3>{{ category }}</h3>
           <div class="apps">
-            <ion-card class="app" v-for="app in appCategory[category]" :key="app.handle" :href="scheme + app.handle + domain + (Object.keys(authStore.current).length ? `/login?oms=${authStore.getOMS}&token=${authStore.token.value}&expirationTime=${authStore.token.expiration}` : '')">
+            <ion-card button class="app" v-for="app in appCategory[category]" :key="app.handle" :href="scheme + app.handle + domain + (authStore.isAuthenticated ? `/login?oms=${authStore.getOMS}&token=${authStore.token.value}&expirationTime=${authStore.token.expiration}` : '')">
               <div class="app-icon ion-padding">
                 <img :src="app.resource" />
               </div>
               <ion-card-header class="app-content">
                 <ion-card-title color="text-medium">{{ app.name }}</ion-card-title>
                 <ion-buttons class="app-links">
-                  <ion-button color="medium" :href="scheme + app.handle + devHandle + domain + (Object.keys(authStore.current).length ? `/login?oms=${authStore.getOMS}&token=${authStore.token.value}&expirationTime=${authStore.token.expiration}` : '')">
+                  <ion-button color="medium" :href="scheme + app.handle + devHandle + domain + (authStore.isAuthenticated ? `/login?oms=${authStore.getOMS}&token=${authStore.token.value}&expirationTime=${authStore.token.expiration}` : '')">
                     <ion-icon slot="icon-only" :icon="codeWorkingOutline" />
                   </ion-button>
-                  <ion-button color="medium" :href="scheme + app.handle + uatHandle + domain + (Object.keys(authStore.current).length ? `/login?oms=${authStore.getOMS}&token=${authStore.token.value}&expirationTime=${authStore.token.expiration}` : '')">
+                  <ion-button color="medium" :href="scheme + app.handle + uatHandle + domain + (authStore.isAuthenticated ? `/login?oms=${authStore.getOMS}&token=${authStore.token.value}&expirationTime=${authStore.token.expiration}` : '')">
                     <ion-icon slot="icon-only" :icon="shieldHalfOutline" />
                   </ion-button>
                 </ion-buttons>
@@ -65,9 +64,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";
@@ -86,6 +85,26 @@ export default defineComponent({
     IonLabel,
     IonPage
   },
+  methods: {
+    login() {
+      // hydrate (pinia-plugin-persistedstate) will sync the app state with the
+      // localStorage state for avoiding the case when two launchpad tabs are opened
+      // 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 })
+      // 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() {
     const authStore = useAuthStore();
     const router = useRouter();
@@ -232,9 +251,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);