NodeJS Nuxt 3 - onServerPrefetch生命周期注入API

68bkxrlz  于 2023-04-20  发布在  Node.js
关注(0)|答案(1)|浏览(440)

[Vue warn]:onServerPrefetch在没有要关联的活动组件示例时被调用。生命周期注入API只能在setup()执行期间使用。如果您使用的是异步setup(),请确保在第一个await语句之前注册生命周期钩子。
可组合

const isLoggerdIn = () => {
    return expire.value //return true or false
  }

中间件

export default defineNuxtRouteMiddleware( (to) => {
  const { isLoggerdIn } = useAuth() // composable

  if (isLoggerdIn() && to.name == 'login'){
    return navigateTo("/home")
  }

  if (!isLoggerdIn() && to.name !== 'login'){
    return navigateTo("/login")
  }

})

在主页和登录页面上

definePageMeta({
  middleware: 'auth'
})
bbuxkriu

bbuxkriu1#

我假设当运行isLoggerdIn方法时,它在内部调用了类似useAsyncDatauseFetch的东西。
如果是这样的话,那么当调用第二个需要能够访问当前nuxt示例的方法时,就会出现你描述的错误消息。只能猜测,但在你的情况下,可能是navigateTo
在新版本的nuxt中,错误消息将更沿着是nuxt instance not available,这是一些众所周知的行为,在issue #14723中被跟踪。
与当前版本的nuxt兼容的解决方案(至少在v3.3之前)是使用callWithNuxt调用navigateTo
在你的例子中,它可能看起来像这样:

👇
import { callWithNuxt } from 'nuxt/app'

export default defineNuxtRouteMiddleware( (to) => {
  const { isLoggerdIn } = useAuth() // composable
  👇
  const nuxtInstance = useNuxtApp()

  if (isLoggerdIn() && to.name == 'login'){
    👇
    return callWithNuxt(nuxtInstance, () => navigateTo("/home"))
  }

  if (!isLoggerdIn() && to.name !== 'login'){
    👇
    return callWithNuxt(nuxtInstance, () => navigateTo("/login"))
  }

})

我发布了另一个例子,展示了如何做到这一点over here

相关问题