Javascript Vue：如何在Vuex getter上使用每路防护？

与我们使用

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中，如上所示，存储区已满

未捕获（承诺中）错误：从“/登录”转到时重定向 “/”通过导航保护

为什么仅仅在第二次点击时它就被重定向到

主页

，而不是在第一次点击时

更新 在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

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

方法：{
异步获取（）{
等待此消息。$store.dispatch（“FETCH_DADOS”，{'data'：'12345}）
这是。$router.push（“/”）
}
}

dispatch（）

返回承诺。在承诺解析后更改路由：

this.$store.dispatch（“FETCH_DADOS”，{'data'：'12345}）。然后（（）=>this.$router.push（'/'））

。此时，它已经提交了

SetCliente

。