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

Question

我正在使用身份验证构建Vuejs应用程序.

当页面加载并初始化appVuejs实例时,我使用beforeCreatehook来设置用户对象.我从中加载JWT localStorage并将其发送到后端进行验证.

问题是这是一个异步调用,并且app在调用返回验证结果之前,使用空的用户数据初始化此对象的组件(导航栏,视图等).

在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

当前生命周期回调是没有任何承诺/异步行为的函数.不幸的是,在加载数据时似乎没有办法让应用程序"暂停".相反,您可能希望在beforeCreate函数中启动加载并设置标志,显示带有空数据的加载屏幕/骨架,在加载数据时翻转标志,然后渲染相应的组件.