Question

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

登录过程（前端和后端）运行良好：显示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。

VueJ启动时加载gapi.auth2

1 个答案: