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

Question

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

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

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

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

以下是我的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
    })
  }

- Gábor Pintér

Answer 1

当前的生命周期回调函数没有任何的 Promise/异步行为。不幸的是，在加载数据时似乎没有办法使应用程序“暂停”。相反，建议您在 beforeCreate 函数中开始加载并设置一个标志，在空数据中显示加载屏幕/骨架，当数据加载完成后翻转标志，然后渲染适当的组件。

- mlaccetti