Reload During Mounting

I am trying to load a few components conditionally. Here is the code snippet.

// app.vue
<template>
  <div v-if="isLoggedIn">
    <NuxtPage />
  </div>
  <div v-else-if="unauthorized">
    <ErrorCard :error-status="403" :error-desc="$t('not-a-valid-azure-group-member')" />
  </div>
</template>

<script setup lang='ts'>
import { useAuthStore } from '~/store/auth'
let unauthorized = ref(false)
let isLoggedIn = ref(false);
await getToken()
const currentUser = useAuthStore()
if (!currentUser.loggedIn) {
  unauthorized.value = true
} else {
  isLoggedIn.value = true;
}
await signIn()
</script>

// app.vue
<template>
  <div v-if="isLoggedIn">
    <NuxtPage />
  </div>
  <div v-else-if="unauthorized">
    <ErrorCard :error-status="403" :error-desc="$t('not-a-valid-azure-group-member')" />
  </div>
</template>

<script setup lang='ts'>
import { useAuthStore } from '~/store/auth'
let unauthorized = ref(false)
let isLoggedIn = ref(false);
await getToken()
const currentUser = useAuthStore()
if (!currentUser.loggedIn) {
  unauthorized.value = true
} else {
  isLoggedIn.value = true;
}
await signIn()
</script>

I expect the above code to show

<NuxtPage />

<NuxtPage />

when the user is logged in and the error component only when the user is unauthorized. But, when we load the app for the first time by visiting localhost:3000, it briefly shows the error component and then refreshes to show the NuxtPage. I am not able to figure out what's wrong with the code. Any help will be highly appreciated.
PS. The login system is using Microsoft Authentication Library (MSAL).

getToken

getToken

fetches a token and saves it in AuthStore which is then fetched using

useAuthStore

useAuthStore

. MSAL works by redirecting to a Microsoft Authentication Portal and then if the token is already present for the user (already signed in), redirects back to the site, or if the token is not already present then keeps the user on its authentication portal until the user completes signing in.

Nuxt•3y ago•

8 replies

Sumit

Reload During Mounting

I am trying to load a few components conditionally. Here is the code snippet.

// app.vue
<template>
  <div v-if="isLoggedIn">
    <NuxtPage />
  </div>
  <div v-else-if="unauthorized">
    <ErrorCard :error-status="403" :error-desc="$t('not-a-valid-azure-group-member')" />
  </div>
</template>

<script setup lang='ts'>
import { useAuthStore } from '~/store/auth'
let unauthorized = ref(false)
let isLoggedIn = ref(false);
await getToken()
const currentUser = useAuthStore()
if (!currentUser.loggedIn) {
  unauthorized.value = true
} else {
  isLoggedIn.value = true;
}
await signIn()
</script>

// app.vue
<template>
  <div v-if="isLoggedIn">
    <NuxtPage />
  </div>
  <div v-else-if="unauthorized">
    <ErrorCard :error-status="403" :error-desc="$t('not-a-valid-azure-group-member')" />
  </div>
</template>

<script setup lang='ts'>
import { useAuthStore } from '~/store/auth'
let unauthorized = ref(false)
let isLoggedIn = ref(false);
await getToken()
const currentUser = useAuthStore()
if (!currentUser.loggedIn) {
  unauthorized.value = true
} else {
  isLoggedIn.value = true;
}
await signIn()
</script>

I expect the above code to show

<NuxtPage />

<NuxtPage />

getToken

getToken

fetches a token and saves it in AuthStore which is then fetched using

useAuthStore

useAuthStore

Reload During Mounting

Similar Threads

Reload During Mounting

Similar Threads

Similar Threads

Similar Threads