VueRouter wait for ajax is

Question

Я создаю SPA, и проблема заключается в проверке, является ли пользователь администратором или нет.

После Vue.auth.getUserInfo() я хочу, чтобы остановить все приложение и ждать ответа API, Vue.auth.user.isAdmin всегда ложно, потому что у меня нет ответа от апи ...

Вот 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(); 
     }) 
} 

Answer 1

Предполагая, что состояние Vue.auth.user.isAdmin управляется в пределах вашей Vue.auth.getUserInfo() логики, вы можете попробовать обещание подход (непроверенные):

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) 
    } 
} 

Answer 2

Это запрос асинхронного запроса.

У вас мало вариантов. 1. Привести эту функцию для VUE-маршрутизатор и поместить код:

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

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

в then() функции вашего запроса.

2. Вероятно, лучше для вашей кривой обучения - изменить свой 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'}) 
    } 
}); 
    } 


} 

я не имею редактор со мной так, он может иметь некоторые небольшие проблемы, но в целом должны работать. Надеюсь, поможет!