如何在 Vue 实例的 beforeCreate 挂钩中进行异步调用？

Question

我正在构建一个带身份验证的 Vuejs 应用程序。

加载页面并初始化 app Vuejs 实例时，我正在使用 beforeCreate 挂钩来设置用户对象。我从 localStorage 加载一个 JWT 并将其发送到后端进行验证。

问题是这是一个异步调用，并且这个 app 对象的组件（导航栏、视图等）在调用之前用空的用户数据初始化 returns 验证结果

延迟子组件初始化直到 promise 对象解析的最佳实践是什么？

这是我的 Vue 应用程序对象中的内容：

beforeCreate: function(){
    // If token or name is not set, unset user client
    var userToken = localStorage.userToken;
    var userName = localStorage.userName;
    if (userToken == undefined || userName == undefined) {
      StoreInstance.commit('unsetUserClient');
      // I WANT TO RESOLVE HERE
      return;
    }

    // If token and name is set, verify token
    // This one makes an HTTP request
    StoreInstance.dispatch({type: 'verifyToken', token: userToken}).then((response) => {
      // I WANT TO RESOLVE HERE
    }, (fail) => {
      // I WANT TO RESOLVE HERE
    })
  }

Answer 1

当前的生命周期回调是没有任何 promises/async 行为的函数。不幸的是，似乎没有办法在您加载数据时使应用程序 "pause"。相反，您可能希望在 beforeCreate 函数中启动加载并设置一个标志，显示带有空数据的加载 screen/skeleton，在数据加载后翻转标志，然后呈现适当的组件。

如何在 Vue 实例的 beforeCreate 挂钩中进行异步调用？

How to make an async call in a beforeCreate hook of a Vue instance?

vue-resource

vue.js

vuejs2