VueRouter ajax 대기 완료

SPA를 구축 중이며 사용자가 admin인지 확인하는 데 문제가 있습니다. 내가 API의 응답이 없기 때문에 내가 모든 응용 프로그램을 중지하고 API 응답을 기다리고 싶지 Vue.auth.getUserInfo() 후VueRouter ajax 대기 완료

는 Vue.auth.user.isAdmin 여기

는

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

router.beforeEach

입니다 ... 항상 false입니다 사용자 정보 가져 오기 방법 :

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

출처

2017-01-05 DokiCRO

그것은 이전에 분 게시되었고 아래로 내려 갔기 때문에 내 대답을 놓친 것이 수치 스럽습니다 ... –

아니요, 죄송 합니다만 사용자가 인증되면 어떻게됩니까? 귀하의 대답은 정확하지만, 코드의 작은 부분이 하나도 빠져있어, 당신이 저를 도왔다 고 정말 고맙게 생각합니다. 대단히 감사합니다 !! – DokiCRO

당신의 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) 
    } 
}

출처

2017-01-05 16:45:12 rags02

비동기 요청입니다.

몇 가지 옵션이 있습니다. 1. 이동이 기능은 뷰 라우터 및 코드 배치 : 귀하의 요청

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


}

작은 문제가 있지만 일반적으로 작동합니다. 희망이 도움이됩니다! Vue.auth.user.isAdmin의 상태를 가정

이

출처

2017-01-05 16:44:19

VueRouter ajax 대기 완료

답변

관련 문제