javascript - 视觉 : How to use Per-Route Guard with Vuex getter?

Question

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

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 中，如上所示，商店已满。

Uncaught (in promise) Error: Redirected when going from "/login" to "/" via a navigation guard.

为什么在第二次点击时重定向到 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('/') 
  }
}