VueRouter 等待 ajax 完成答案

【问题标题】：VueRouter wait for ajax is doneVueRouter 等待 ajax 完成
【发布时间】：2017-05-20 06:35:33
【问题描述】：

我正在构建 SPA，问题是检查用户是否为管理员。

Vue.auth.getUserInfo() 之后我想停止整个应用程序并等待 API 响应，Vue.auth.user.isAdmin 始终为 false，因为我没有来自 api 的响应...

这里是 router.beforeEach

router.beforeEach((to, from, next) => {

   if(Vue.auth.user.authenticated == false) {
       Vue.auth.getUserInfo();
   }

   if(Vue.auth.user.isAdmin) {
      next({ name: 'admin.index' })
   } else {
      next({name: 'client.index'})
   }
}

获取用户信息方法：

getUserInfo() {
    Vue.http.get('/api/me')
        .then(({data}) => {
            this.user = data;
        }, () => {
            this.logout();
        })
}

【问题讨论】：

很遗憾你错过了我的答案，因为它是在一分钟前发布的并且已经失败了......
不，伙计，对不起，但您的答案不完整，因为如果用户通过身份验证会发生什么？您的回答是正确的，但它缺少一小部分代码，我非常感谢您试图帮助我。非常感谢！！

标签： javascript vue.js vuejs2 vue-router vue-resource

【解决方案1】：

假设Vue.auth.user.isAdmin 的状态在您的Vue.auth.getUserInfo() 逻辑中进行管理，您可以尝试使用promise 方法（未经测试）：

getUserInfo() {
  return new Promise((resolve, reject) => {
    Vue.http.get('/api/me')
      .then(({data}) => {
        this.user = data;
        // Or, to use when consuming this within the then() method:
        resolve(data);
      }, () => {
        reject();
      })
  })
}

然后，当你在你的守卫中消费它时（https://router.vuejs.org/en/advanced/navigation-guards.html）：

// A couple small auth/guard helper functions
function guardCheck(next) {
  if(Vue.auth.user.isAdmin) {
    next({ name: 'admin.index' })
  } else {
    next({name: 'client.index'})
  }
}
function guardLogout(next) {
  Vue.auth.user.logout()
    .then(() => {
      next({ name: 'home.index', params: { logout: success }})
    })
}

router.beforeEach((to, from, next) => {
  if(Vue.auth.user.authenticated === false && !to.matched.some(record => record.meta.isGuest)) {
    Vue.auth.getUserInfo()
      .then((user) => {
        guardCheck(next)
      })
      .catch(() => {
        // Not sure how your logout logic works but maybe...
        guardLogout(next)
      })
  } else {
     guardCheck(next)
  }
}

【讨论】：

【解决方案2】：

是异步请求。

您的选择很少。 1. 将此函数移至 vue-router 并放置您的代码：

   if(Vue.auth.user.authenticated == false) {
       Vue.auth.getUserInfo();
   }

   if(Vue.auth.user.isAdmin) {
      next({ name: 'admin.index' })
   } else {
      next({name: 'client.index'})
   }
}

在then()你的请求函数中。

可能更适合您的学习曲线 - 将您的 getUserInfo() 修改为基于承诺。

然后，您的 auth 模块中将包含以下内容：

var getUserInfo = new Promise((resolve,reject) => {
 Vue.http.get('/api/me')
        .then(({data}) => {
            this.user = data;
            resolve();
        }, () => {
            this.logout()
            reject();
        })
}

在您的路由器中：

router.beforeEach((to, from, next) => {

   if(Vue.auth.user.authenticated == false) {
       Vue.auth.getUserInfo().then(()=>{
if(Vue.auth.user.isAdmin) {
      next({ name: 'admin.index' })
   } else {
      next({name: 'client.index'})
   }
});
   }


}

我没有编辑器，所以它可能会出现一些小问题，但通常应该可以工作。希望对您有所帮助！

【讨论】：