BeforeRouteEnter при обновлении страницы?

Question

[iAlex195]

Добрый день.
Как сделать так, чтобы при обновлении страницы (одного и того же компонента) срабатывал beforeRouteEnter и запрашивал данные с сервера?
Заранее спасибо.

Answer 1

[Михаил]

Когда это один путь, с разными параметрами, т.е. тот же компонент, то вызывается не этот хук, а beforeRouteUpdate

Comments

[iAlex195]

У меня при перезагрузке страницы данные из vuex store теряются, из-за этого пользователя редиректит.

Это в роутере. Я пытаюсь восстановить данные с помощью store.dispatch('currentUser/setUserData'), но он вызывается позже, чем store.getters['currentUser/getUserRoles'];

router.beforeEach((to, from, next) => {

    store.dispatch('currentUser/setUserData')
    const roles = store.getters['currentUser/getUserRoles'];
    
    if(to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem('cmdb_token') == null) {
          next({
            path: '/login',
            query: { redirect: to.fullPath }
          })
        } else {
            if(to.matched.some(record => record.meta.requiresAdmin)) {
                if(roles.includes('admin')) {
                    next()
                } else {

                }
            } else if(to.matched.some(record => record.meta.requiresInventory)) {
                if(roles.includes('inventory') || roles.includes('admin')){
                    next()
                } else {
                    next({
                        path: '/',
                        query: { redirect: to.fullPath }
                    })
                }
            } else if(to.matched.some(record => record.meta.requiresContractor)) {
                if(roles.includes('contractor') || roles.includes('admin')){
                    next()
                } else {
                    next({
                        path: '/',
                        query: { redirect: to.fullPath }
                    })
                }
            }
        }

    } else {
        next()
    }
});

Я пробовал в компоненте вызывать beforeRouteUpdate, но при перезагрузке он не срабатывает.

[Михаил]

iAlex195, а что вы перезагрузкой называете?
Полную перезагрузку, когда в строке адреса Enter жмешь?

p.s. Чтобы dispatch завершался перед getters вы должны с async/await поработать

[iAlex195]

Да, именно такую перезагрузку.
Не могли бы Вы помочь с async/await в данном примере?

[Михаил]

await поставьте перед store.dispatch

[iAlex195]

Михаил, На await ругается так, потому что не в асинхронной функции. Я сделал в асинхронной функции, данные во Vuex появляются при загрузке страницы, но почему-то при обращении к ним выводится пустой объект.

[Михаил]

iAlex195, поставьте async перед (to, from, next)

[iAlex195]

При перезагрузке, данные есть во vuex и через console.log, но при обращении к любому свойству объекта возвращает пустой объект.

[Михаил]

У console.log есть особенность, если им выводить объект, а потом вы раскроете его, то он покажет состояние объекта на момент раскрытия, а не логирования. debugger; можно добавить после console.log() и тогда точно посмотреть что есть что.