Vue.js 中的 vue-google-oauth-2 问题答案

【问题标题】：Problem with vue-google-oauth-2 in Vue.jsVue.js 中的 vue-google-oauth-2 问题
【发布时间】：2018-10-19 16:01:44
【问题描述】：

我正在尝试向我的 Vue.js 应用程序添加一个 Google 登录按钮，但我找到了 vue-google-oauth2 插件。我安装了它并完全按照sample.html 代码将它集成到我的应用程序中，这样：

<template>
  <div>
   <h1>Test</h1>
   <button @click="handleClickSignIn" :disabled="!isLoaded">signIn</button>
  </div>
 </template>

 <script>
  /** 
  * You should first need to place these 2 lines of code in your APP ENTRY file, e.g. src/main.js
  *
  * import GAuth from 'vue-google-oauth2'
  * Vue.use(GAuth, {clientId: '4584XXXXXXXX-2gqknkvdjfkdfkvb8uja2k65sldsms7qo9.apps.googleusercontent.com'})
  * 
  */
  export default {
   name: 'test',
   props: [],
   components: {
   },
   data () {
    return {
     isLoaded: false
    }
   },
   computed: {
   },
   methods: {
    handleClickSignIn(){
      this.$gAuth.signIn(function (user) {
         //on success do something
      console.log('user', user)
      }, function (error) {
         //on fail do something
      })
    }
  },
  mounted(){
    let that = this
    let checkGauthLoad = setInterval(function(){
      that.isLoaded = that.$gAuth.isLoaded()
      console.log('checked', that.isLoaded)
      if(that.isLoaded) clearInterval(checkGauthLoad)
    }, 1000);
  }
}
</script>

问题是 isLoaded() 方法永远不会返回 true，每次我按下按钮时，Google Chrome 控制台都会告诉我 google api is not ready，即当 GoogleAuthInstance 为 false 时打印的插件控制台消息.谁能帮帮我？

【问题讨论】：

你的 index.js/main.js 是什么样子的？您是否已初始化 Google 身份验证？你看过github.com/guruahn/vue-google-oauth2#readme吗？
我做了你要求的所有事情。我在 main.js 中添加了两行用于项目中的 Google Auth 初始化，并且我还完成了 README.md 文件中提供的所有步骤。

标签： javascript vue.js google-authentication

【解决方案1】：

使用isInit 代替isLoaded，因为后者将被/已弃用。

【讨论】：

【解决方案2】：

添加到 main.js

import GAuth from 'vue-google-oauth2'


Vue.use(GAuth, {
    clientId: '....apps.googleusercontent.com',
    scope: 'email',
    prompt: 'consent',
    fetch_basic_profile: true
})


new Vue({
...
  render: (h) => h(App),
}).$mount("#app");

【讨论】：