Fetch() 中的 Nuxt 和 $auth

Question

我的 $auth 有问题...

在页面中，我必须验证 $auth.loggedIn 值。

<template>
   {{ this.$auth.loggedIn }}
</template>
<script>
   export default{
       async fetch(){
          if(this.$auth.loggedIn){
            console.log('User connected')
          }else{
            console.log('User not connected')
          }
       }
    }
</script>

我模板中的第一个 $auth.loggedIn 显示 TRUE（没关系），但我的 console.log 显示“用户未连接”...

怎么可能？看来我对 $router / $route 变量有同样的问题...

非常感谢！文森特

Answer 1

fetch 在呈现路线时在 服务器端 上调用，在导航时在 客户端 上调用。

因此，如果它正在呈现您的路线，它会在服务器端进行初始化，并且由于 this.$auth 仅在 客户端 上可用，因此无法访问它。

尝试通过 app

访问它

async fetch ({ app }) {
      if(app.$auth.loggedIn){
        console.log('User connected')
      }else{
        console.log('User not connected')
      }
}

关于参数问题，您可以像下面这样访问：

async fetch ({ params }) {
        console.log(params.id)
}

或

async fetch ({ route}) {
        console.log(route.params.id)
}

Fetch() 中的 Nuxt 和 $auth

Nuxt and $auth in Fetch()

authentication

fetch

nuxt.js