Vue：如何在 Vuex getter 中使用 Per-Route Guard？

Question

类似于我们使用isAuthenticate function 检查用户是否已正确验证的方式，我正在尝试在我的商店中进行检查。

const state = {
    cliente: []
};

const getters = {
    //Verificar Regra
    CHECK_CLIENTE_STATE: (state) => {
        return state.cliente
    }
}

const actions = {
    FETCH_DADOS({ commit }, obj) {
        return fetch(`http://localhost:3030/pessoas/informacao/${obj['data']}`)
            .then(response => response.json())
            .then(data => commit('SetCliente', data))
            .catch(error => console.log(`Fetch: ${error}`))
    }
}

const mutations = {
    SetCliente(state, cliente) {
        state.cliente = cliente
    }
}

登录页面，

  methods:{
    fetch(){
      this.$store.dispatch("FETCH_DADOS",{'data':'12345'})
      this.$router.push('/') 
    }
  }

在第一次获取点击时，我检查了 Vuex，显然它正在工作。

路线：

const routes = [{
        path: '/',
        beforeEnter: (to, from, next) => {
            if (store.getters.CHECK_CLIENTE_STATE == '') {
                next('/login')
            }
            next();
        },
        component: () =>
            import ('../views/Home')
    },
    {
        path: '/login',
        component: () =>
            import ('../views/Login')
    }
]

好吧，在第一次获取点击的console.log中，我收到了这个错误，但是在vuex中如上所示，存储已满。

未捕获（承诺）错误：通过导航守卫从“/login”转到“/”时重定向。

为什么只是在第二次点击中它被重定向到home ，而不是在第一次？

更新

在 router.js 中尝试新方法

path: '/',
beforeEnter: (to, from, next) => {
    console.log(!store.getters.CHECK_CLIENTE_STATE.length)
    if (!store.getters.CHECK_CLIENTE_STATE.length) {
        next('/login')
    }
    next();
},
component: () =>
    import ('../views/Home')

但同样，第一次获取是TRUE和第二次FALSE ，在第二次我被重定向到 /home

Answer 1

在加载数据之前对路由器进行定向。 等待它：

methods:{
  async fetch(){
    await this.$store.dispatch("FETCH_DADOS",{'data':'12345'})
    this.$router.push('/') 
  }
}