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

问题描述

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

我收到以下错误消息：

这是我nuxt.config.js的阿波罗专区

  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标头？

解决方法

请考虑在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)
  });
},

,

我以某种方式解决了该错误

    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);
      }
    },