15

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

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

问题是这是一个异步调用，并且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
    })
  }
4

1 回答 1

17

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

于 2016-10-31T20:25:57.017 回答