NuxtJS Apollo 模块 TypeError：无法读取未定义的属性“$apolloHelpers”

Posted 2023-03-10

【中文标题】NuxtJS Apollo 模块 TypeError：无法读取未定义的属性“$apolloHelpers”

【英文标题】：NuxtJS Apollo module TypeError: Cannot read property '$apolloHelpers' of undefined

【发布时间】：2021-01-17 07:49:04

【问题描述】：

我正在构建一个简单的 NuxtJS 应用程序，该应用程序使用 NuxtJS Apollo 模块使用 GraphQL 端点。我目前正在构建应用程序的身份验证部分。我想使用 apolloHelpers.onLogin() 函数在 cookie 中设置 auth 标头并使用该 JWT 标头调用 GraphQL 请求。

我收到以下错误消息：

这是我的nuxt.config.jsapollo 部分

  apollo: 
    clientConfigs: 
      default: 
        httpEndpoint: process.env.HTTP_ENDPOINT,
        wsEndpoint: process.env.WS_ENDPOINT
      ,
    ,
  ,

这是我的pages/login.vue 页面

  <div>
    <button @click="googleLogin">Login with Google</button>
    <div v-if="$auth.isAuthenticated">
       $auth.user 
      <button @click="logout">Logout</button>
      <nuxt-link to="/messages">Messages</nuxt-link>
    </div>
  </div>
</template>


<script>
import firebase from "firebase";

export default 
  methods: 
    async googleLogin(user) 
      var provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope("profile");
      provider.addScope("email");
      await this.$fireAuth.signInWithPopup(provider).then(function (result) 
        var user = result.user;
        console.log(user)
        this.$apolloHelpers.onLogin(user.xa)
      );
    ,
    async logout() 
      this.$fireAuth.signOut();
      await this.$apolloHelpers.onLogout() 
    ,
  ,
;
</script>

如何在调用 GraphQL 请求时在我的代码中正确使用 this.$apolloHelpers.onLogin() 函数来设置 Authorization 标头？

【参考方案1】：

考虑在googleLogin 方法中使用此代码。

async googleLogin(user) 
  var provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope("profile");
  provider.addScope("email");
  let temp = this;
  await this.$fireAuth.signInWithPopup(provider).then(function (result) 
    var user = result.user;
    console.log(user)
    temp.$apolloHelpers.onLogin(user.xa)
  );
,

【参考方案2】：

我以某种方式修复了这样的错误

    async googleLogin(user) 
      var provider = new firebase.auth.GoogleAuthProvider();
      provider.addScope("profile");
      provider.addScope("email");
      try 
        var token
        await this.$fireAuth.signInWithPopup(provider).then(function (result) 
          var user = result.user;
          token = user.xa
          console.log(user);
        );
        await this.$apolloHelpers.onLogin(token, undefined,  expires: 7 );
       catch (e) 
        console.error(e);
      
    ,