Question

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

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

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

在promise对象结算之前，延迟初始化子组件的最佳做法是什么？

以下是我在Vue app对象中的内容：

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函数中启动加载并设置标志，显示带有空数据的加载屏幕/骨架，在加载数据时翻转标志，然后渲染相应的组件。

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

1 个答案: