VueJs 启动时加载 gapi.auth2

Question

我正在构建一个 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

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

Answer 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。