Vue Router Guards가 Vuex를 대기하도록 하는 방법

Vue Router Guards가 Vuex를 대기하도록 하는 방법

그래서 제가 이 질문에 대해 공개적으로 찾은 모든 답변은 별로 도움이 되지 않았고, "작동"하는 동안에도 믿을 수 없을 정도로 해킹을 했습니다.

기본적으로 vuex 변수가 있습니다.appLoading이것은 처음에는 참이지만 모든 비동기 조작이 완료되면 false로 설정됩니다.또한 vuex 변수도 있습니다.user비동기 조작으로부터 디스패치 되는 유저 정보가 포함되어 있습니다.

다음으로 라우터가드도 체크할 수 있습니다.

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresAuth)) {
    if (store.getters.getUser) {
      return next();
    }
    return router.push({ name: 'index.signup' });
  }

  return next();
});

첫 번째 Vue 인스턴스에서 로드 상태를 표시합니다.appLoading = false;

이제 이것은 효과가 있지만 저를 정말 괴롭히는 문제가 하나 있습니다.페이지를 로드하면, 표시하기로 되어 있는 반대 페이지의 「플리커」가 표시됩니다.

로그인하고 있는 경우는, 최초로 로드했을 때에, 등록 페이지가 점멸합니다.로그인하지 않으면 로그인한 페이지가 깜박입니다.

이것은 꽤 귀찮고, 나는 그 문제를 나의 인증 가드에게 좁혔다.등록 페이지를 라우터에 푸시하고 있는 것 같습니다.user존재하지 않는 경우 로그인한 페이지로 즉시 푸시합니다.user커밋됩니다.

좀 귀찮고 Vue가 이와 같은 일반적인 문제에 대해 공식적인 문서나 예시를 전혀 가지고 있지 않다는 것이 좀 짜증나기 때문에, 특히 많은 수의 웹 앱이 인증을 사용하고 있기 때문에, 어떻게 하면 이 문제를 해결할 수 있을까요?

누군가 도움을 줄 수 있기를 바랍니다.:)

코멘트의 설명에 의하면:

고객에게 가장 적합한 접근법은 다음과 같습니다.appLoading변수 apromise이렇게 하면 앱 데이터가 해결될 때까지 작업을 수행하거나 대기할 수 있습니다.

고려하면appLoadingapi 콜 약속으로 초기화하는 약속, 라우터 후크는 다음과 같습니다.

router.beforeEach((to, from, next) => {
  appLoading.then(() => {
    if (to.matched.some(route => route.meta.requiresAuth)) {
      if (store.getters.getUser) {
        return next();
      }
      return router.push({ name: "index.signup" });
    }

    return next();
  });
});

이 파일은, E-메일 주소로부터의 export로서 보존하는 것이 좋을지도 모릅니다.initVuex에 보관하는 대신 코드를 사용합니다.Vuex는 컴포넌트를 통해 공유되는 사후 대응형 데이터용입니다.

각 후크 앞의 라우터는 약속으로 Vuex 액션이 완료될 때까지 대기할 수 있습니다.예를 들어 다음과 같습니다.

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(route => route.meta.requiresAuth)) {
    await store.dispatch('init');

    if (store.getters.getUser) {
      return next();
    }
    return router.push({ name: 'index.signup' });
  }

  return next();
});

'init' 액션은 약속을 반환해야 합니다.

const actions = {
  async init({commit}) {
    const user = await service.getUser();
    commit('setUser', user);
  }
}

이 방법에는 특정 페이지로 이동할 때마다 서버에서 사용자를 가져오는 'init' 액션이 트리거된다는 문제가 있습니다.사용자가 없는 경우에만 사용자를 가져오고 싶기 때문에 사용자가 있는지 여부를 스토어 체크를 업데이트하여 순서대로 가져올 수 있습니다.

const state = {
  user: null
}
const actions = {
  async init({commit, state}) {
    if(!state.user) {
      const user = await service.getUser();
      commit('setUser', user);
    }
  }
}

언급URL : https://stackoverflow.com/questions/53850573/how-to-make-vue-router-guards-wait-for-vuex