Vue.js 在 onMounted 之前渲染的 Vue 模板

我有一个简单的Vue应用程序与Bulma Navbar和简单的组件.我正在使用Firebase进行身份验证.附录:

<script setup>
import { RouterLink, RouterView } from "vue-router";
import NavBar from "@/components/Navbar.vue"
</script>

<template>
    <NavBar />
    <RouterView />
</template>

<style lang="scss">
@import 'bulma/css/bulma.min.css';
</style>

问题是我的导航栏是在判断用户状态之前呈现的.因此，用户已登录，但Navbar呈现的效果就像用户未登录一样.

以下是导航栏在用户未登录时的外观-登录和注册可用:

模板使用标志和v-if来呈现元素:

        <a v-if="!isLoggedIn" class="navbar-item">
            <RouterLink to="/login" @click="burgerActive = 0">Login
            </RouterLink>
        </a>
        <a v-if="!isLoggedIn" class="navbar-item">
            <RouterLink to="/signup" @click="burgerActive = 0">Sign up</RouterLink>
        </a>

使用onMounted挂钩设置标志.

问题是，模板是在设置用户标志之前呈现的.我try 了调试，以下是通过放置一些日志(log)获得的结果:

onMounted(() => {
    console.log('1: entered onMounted', isLoggedIn.value, isAdmin.value)
    onAuthStateChanged(auth, (user) => {
        console.log('2: onAuthStateChanged invoked')
        if (user) {
            isLoggedIn = true
            userName = user.displayName
            user.getIdTokenResult().then((idTokenResult) => {
                isAdmin = idTokenResult.claims.admin
                console.log('3: user flags set', isLoggedIn.value, isAdmin.value)
            })
        } else {
            isLoggedIn = false
            isAdmin = false
        }
    })
    console.log('4: after onAuthStateChanged', isLoggedIn.value, isAdmin.value)
})

我的理解和期望是，在挂载时，会进行身份验证、设置标志并呈现模板.我在控制台输出中得到的结果证明我错了:

结果是，导航栏呈现为用户未登录.但仅在页面加载时使用.

我如何知道用户实际上已登录？我的依赖于用户的内容可以正确呈现.

如果我单击任何导航栏按钮，它会重新呈现属性，其中隐藏了Login和Sign up个元素.

我错过了什么吗？