Подобно тому, как мы работаем с функцией 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.info(`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.info
при первом нажатии на выборку я получаю эту ошибку, но в vuex, как показано выше, хранилище заполнено.
Uncaught (в обещании) Ошибка: перенаправлено при переходе с «/login» на "/" через навигационную защиту.
Почему именно во второй клик перенаправляется на home
, а не в первый?
Пробуем новый подход в router.js
path: '/',
beforeEnter: (to, from, next) => {
console.info(!store.getters.CHECK_CLIENTE_STATE.length)
if (!store.getters.CHECK_CLIENTE_STATE.length) {
next('/login')
}
next();
},
component: () =>
import ('../views/Home')
Но опять же, первая выборка TRUE
, а вторая FALSE
, во второй меня перенаправляет на /home
Маршрутизатор направляется до загрузки данных. Ждать его:
methods:{
async fetch(){
await this.$store.dispatch("FETCH_DADOS",{'data':'12345'})
this.$router.push('/')
}
}
dispatch()
возвращает обещание. Изменить маршрут после разрешения обещания:this.$store.dispatch("FETCH_DADOS",{'data':'12345'}).then(() => this.$router.push('/'))
. На тот момент он уже совершилSetCliente
.