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

【问题标题】：NuxtJS Apollo module TypeError: Cannot read property '$apolloHelpers' of undefinedNuxtJS Apollo 模块 TypeError：无法读取未定义的属性“$apolloHelpers”
【发布时间】：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 标头？

【问题讨论】：

标签： javascript nuxt.js apollo-client vue-apollo

【解决方案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);
      }
    },

【讨论】：