Vue: Как использовать Per-Route Guard с геттером Vuex?

Подобно тому, как мы работаем с функцией 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

dispatch() возвращает обещание. Изменить маршрут после разрешения обещания: this.$store.dispatch("FETCH_DADOS",{'data':'12345'}).then(() => this.$router.push('/')). На тот момент он уже совершил SetCliente.
tao 15.12.2020 01:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
1
888
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Маршрутизатор направляется до загрузки данных. Ждать его:

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

Другие вопросы по теме