сохраненное состояние vuex не работает с защитой навигации маршрутизатора vue - PullRequest
Новая
       42

сохраненное состояние vuex не работает с защитой навигации маршрутизатора vue

0 голосов
/ 14 октября 2018

Я добавил vuex-persistedstate, как определено в документации. (подтверждено и работает) 

export default new Vuex.Store({
    modules: {
        auth,
    },
    plugins: [VuexPersistedState()]
});

Я настроил защиту навигации маршрутизатора для перенаправления на домашнюю страницу при входе в систему 

/* Auth based route handler */
router.beforeEach((to, from, next) => {
    if (to.meta.hasOwnProperty('requiresAuth')) {
        if (to.meta.requiresAuth === true) {
            let isAuthenticated = authStore.getters.isAuthenticated
            if (isAuthenticated(authStore.state) === true) {
                next()
            } else {
                next({name: 'login'})
            }
        } else {
            let isAuthenticated = authStore.getters.isAuthenticated
            console.log(authStore.state)
            if (isAuthenticated(authStore.state) === true) {
                next({name: 'home'})
            } else {
                next()
            }
        }
    } else {
        next()
    }
})

Vuex persistedstate восстанавливает хранилищеиз локального хранилища, но не перед навигационной защитой!

Я могу предоставить любую необходимую часть исходного кода для оценки.Пожалуйста, прокомментируйте ваш запрос по мере необходимости.Экспериментальные решения также приветствуются.Это просто приложение для личного обучения!

Помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 09 июня 2019

Я знаю, что это, вероятно, бесполезно для @Vaishnav, но так как я недавно не пробежал по той же самой кроличьей норе, я решил опубликовать обходной путь, который я нашел для этого здесь, так как это был единственный пост, который я нашел, который спросилЭта проблема конкретно.

в вашем store/index.js Вам необходимо экспортировать как функцию, так и объект хранилища.

Измените это: 

export default() => {
  return new vuex.Store({
  namespaced: true,
  strict: debug,
    modules: {
      someMod 
    }, 
    plugins: [createPersistedState(persistedStateConfig)] 
  }); 
};

на: 

const storeObj = new vuex.Store({
  namespaced: true,
  strict: debug,
  modules: {
    someMod
  },
  plugins: [createPersistedState(persistedStateConfig)]
});

const store = () => {
  return storeObj;
};

export {store, storeObj}

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

В любое место вашего приложения вы импортировали магазин, т. Е. В main.js -> import store from '@/store', за исключением router.js, вам необходимо изменить значение на import {store} from '@/store'

.router.js просто import {storeObj} from '@/store' и используйте это вместо store в вашей защите маршрутизатора, то есть: storeObj.getters['someMod/someValue']

0 голосов
/ 15 октября 2018

Я нашел рабочий пример.

Поскольку маршрутизатор не является компонентом.

В файле конфигурации маршрутизатора - 

import authStore from '@/stores/auth/store'

Вместо - 

import store from '@/store'

в навигационной охране, I заменено 

let isAuthenticated = authStore.getters.isAuthenticated
if(isAuthenticated(authstore.state) === true){...}

с - 

let isAuthenticated = store.getters['auth/isAuthenticated']
if(isAuthenticated === true){...}

А теперь этот работает как шарм ...

...