Vue Router用async/await时Flowbite initFlowbite()失效求助

当Vue Router的beforeEach导航守卫使用async/await做用户认证时，Flowbite的JS组件（菜单、下拉框等）无法正常工作；移除await后Flowbite功能恢复，但失去了用户认证的异步校验能力。已按官方文档完成Tailwind和Flowbite的安装，组件内JS功能正常。另外发现，访问不存在的URL再返回原页面时，Flowbite会恢复正常，推测是Flowbite在页面完全渲染前完成了初始化，但之前尝试的几种修复方法都无效：

• 在App组件的mounted钩子中调用initFlowbite()
• 在路由守卫的async/await代码后调用initFlowbite()
• 在路由渲染的组件中调用initFlowbite()

问题代码示例 #

存在问题的异步守卫代码

import { initFlowbite } from 'flowbite'

async function isAuthenticated() {
    const response = await axios.get('/api/user')
    return response.data;
}

router.beforeEach(async(to, from) => {
    const user = await isAuthenticated();
    const isAuth = user !== ''

    if (to.meta.isAuthPage === true && isAuth === true) {
        return {name: 'dashboard'}
    }
    if (isAuth === false && to.meta.requiresAuth === true) {
        return {name: 'login'}
    }
})

移除async/await后可运行但丢失认证功能的代码

import { initFlowbite } from 'flowbite'

async function isAuthenticated() {
    const response = await axios.get('/api/user')
    return response.data;
}

router.beforeEach((to, from) => {
    const user = isAuthenticated();
    const isAuth = user !== ''

    if (to.meta.isAuthPage === true && isAuth === true) {
        return {name: 'dashboard'}
    }
    if (isAuth === false && to.meta.requiresAuth === true) {
        return {name: 'login'}
    }
})

尝试过的无效修复代码

import { initFlowbite } from 'flowbite'
mounted() {
    initFlowbite() 
},

可行修复方案 #

方案1：用router.afterEach钩子初始化Flowbite #

异步导航守卫会延迟路由跳转，导致Flowbite提前初始化时DOM还未更新完成。改用afterEach钩子，确保路由跳转完成、DOM渲染后再初始化Flowbite：

import { initFlowbite } from 'flowbite'
import { nextTick } from 'vue'

// 保留原有的异步beforeEach守卫
async function isAuthenticated() {
    const response = await axios.get('/api/user')
    return response.data;
}

router.beforeEach(async(to, from) => {
    const user = await isAuthenticated();
    const isAuth = user !== ''

    if (to.meta.isAuthPage === true && isAuth === true) {
        return {name: 'dashboard'}
    }
    if (isAuth === false && to.meta.requiresAuth === true) {
        return {name: 'login'}
    }
})

// 添加afterEach钩子，等待DOM更新后初始化
router.afterEach(() => {
    nextTick(() => {
        initFlowbite()
    })
})

方案2：优化认证逻辑+缓存用户信息（可选） #

每次导航都请求/api/user会增加延迟，还可能加重服务器负担。可以缓存用户信息，只在登录/登出时清空缓存：

import { initFlowbite } from 'flowbite'
import { nextTick } from 'vue'

let cachedUser = null;

async function isAuthenticated() {
    // 有缓存直接返回，避免重复请求
    if (cachedUser !== null) {
        return cachedUser;
    }
    const response = await axios.get('/api/user')
    cachedUser = response.data;
    return cachedUser;
}

// 登录/登出时调用此方法清空缓存
export function clearAuthCache() {
    cachedUser = null;
}

router.beforeEach(async(to, from) => {
    const user = await isAuthenticated();
    const isAuth = user !== ''

    if (to.meta.isAuthPage === true && isAuth === true) {
        return {name: 'dashboard'}
    }
    if (isAuth === false && to.meta.requiresAuth === true) {
        return {name: 'login'}
    }
})

router.afterEach(() => {
    nextTick(() => {
        initFlowbite()
    })
})

方案3：在App组件中监听路由变化初始化 #

在App组件里监听路由变更，每次路由切换完成后重新初始化Flowbite：

<template>
  <router-view />
</template>

<script>
import { initFlowbite } from 'flowbite'
import { watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    // 监听路由变化，DOM更新后初始化Flowbite
    watch(route, () => {
      setTimeout(() => {
        initFlowbite()
      }, 0)
    }, { deep: true })
  },

  mounted() {
    initFlowbite()
  }
}
</script>

内容的提问来源于stack exchange，提问作者zaketn