如何解决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);
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。