VueJs 启动时加载 gapi.auth2

Posted 2023-02-23

【中文标题】VueJs 启动时加载 gapi.auth2

【英文标题】：Load gapi.auth2 when VueJs starts

【发布时间】：2019-12-17 01:39:04

【问题描述】：

我正在构建一个 vue js 网络应用程序，可以连接到用户的 Google 帐户。

登录过程（前端和后端）工作正常：显示谷歌登录按钮，用户点击它并显示其头像，无需重新加载页面。

现在，用户已经登录并刷新页面。这里的“视觉”问题是对后端的请求是在最后完成的，因为我无法在加载 vue js 组件/页面之前实例化 gapi.auth2。

我已经从this post 尝试过这个解决方案，但我无法在主应用程序data 部分调用 gapi.auth2：

      <script>
          function onLoad() 
           gapi.load('auth2', function() 
            gapi.auth2.init();
              );
          
      </script>
      <script type="text/javascript" src="https://apis.google.com/js/platform.js?onload=onLoad"></script>
      ...
      <script type="module" src="main.js"></script>
   </body>
</html>

Main.js：

var app = new Vue(
el: '#app',
data: 
    user: gapi.auth2.getAuthInstance().currentUser.get()

错误是TypeError: gapi.auth2 is undefined

是否可以在整个页面加载之前直接获取信息？

【问题讨论】：

你试过window.gapi吗？

刚试了没用

【参考方案1】：

我假设gapi.auth2.getAuthInstance().currentUser.get() 是一个异步任务，您可以使用在创建实例时触发的异步created 钩子并将值分配给您的数据：

// import gapi from '....'
var app = new Vue(
  el: '#app',
  async created() 
    try 
      let res = await gapi.auth2.getAuthInstance().currentUser.get();
      this.user = res.data
     catch (e) 
      console.log(e)
    
  ,
  data: 
    user: null,
  
)

并确保您已在脚本顶部导入 gapi。

【讨论】：

从什么导入gapi？我正在通过脚本标签加载它

你得到它，只要它被定义你不需要导入它......代码工作正常吗？

如果你得到`TypeError: gapi.auth2 is undefined´，实际上gapi是未定义的

还是同样的错误：gapi.auth2 未定义。我认为这是因为 gapi.auth2 是在初始化 google 按钮时定义的