Почему мой получатель Vuex возвращает TRUE на стороне клиента и FALSE на стороне сервера? - PullRequest
Новая
       8

Почему мой получатель Vuex возвращает TRUE на стороне клиента и FALSE на стороне сервера?

0 голосов
/ 06 июля 2018

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

У меня есть геттер в моем хранилище Vuex (с использованием NUXT): 

getters: {
  isLoggedIn (state) {
    return !isEmpty(state.auth.email) && !isEmpty(state.auth.token)
  }
}

Я обращаюсь к этому геттеру в промежуточном программном обеспечении, чтобы перенаправить неаутентифицированных пользователей на страницу входа: 

let isLoggedIn = context.store.getters.isLoggedIn
if (!isLoggedIn && protectedRoutes.includes(context.route.name)) {
    let language = context.store.language ? context.store.language : 'en'
    context.redirect(`/${language}/login`)
  }

Но это не работает. Когда я получаю console.log () значение этого геттера, я получаю TRUE на стороне клиента и FALSE на стороне сервера. Как я могу синхронизировать их с Vue / Vuex?

Более того, всякий раз, когда я console.log () создаю объект контекста на стороне сервера, он, по-видимому, находится в исходном состоянии. Должно быть, что-то в корне не так с моим подходом.

1 Ответ

0 голосов
/ 06 июля 2018

Когда пользователь обновляет страницу, все состояние vuex теряется и начинается с нового. Вам нужно инициализировать пользователя где-то вроде nuxtServerInit 

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}
...