VueRouterがAjaxを待っています

Question

私はSPAを構築していますが、問題はユーザーがadminかどうかを確認することです。

Vue.auth.getUserInfo()た後、私は全体のアプリケーションを停止し、私は、APIからの応答がないためVue.auth.user.isAdminは常に偽である、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(); 
     }) 
} 

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

これは非同期要求です。

オプションはほとんどありません。・ルータをVUEとあなたのコードを配置する 1.移動この機能：あなたの要求のthen()機能で

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

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

。

2. おそらくあなたの学習曲線の方が良いでしょう - あなたのgetUserInfo()を約束するように修正すること。それはいくつかを持つことができますので、私は私と一緒に、エディタを持っていない

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

   ：

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

   とルーターで：あなたは、あなたのauthモジュール内のようなものを持っています

小さな問題が一般的に動作するはずです。それが役に立てば幸い！