Аутентификация недоступна в vuex-модуле после перезагрузки страницы или прямого доступа - PullRequest
Новая
       52

Аутентификация недоступна в vuex-модуле после перезагрузки страницы или прямого доступа

5 голосов
/ 11 февраля 2020

У меня есть аутентификация в моем веб-приложении nuxt с использованием модуля nuxt / auth. Я также использую модульные магазины Vuex для обработки различных состояний. После входа в систему все в порядке, и я могу нормально перемещаться по приложению. Но когда я пытаюсь перезагрузить страницу или получить к ней доступ напрямую через URL, пользователь становится недоступным, поэтому все веб-приложение становится непригодным для использования. Я пытаюсь получить доступ к объекту пользователя с this.context.rootState.auth.user, который является нулевым после перезагрузки страницы или прямого доступа. Как ни странно, это происходит только в производстве.

Я уже пытался добавить if-guard, но, к сожалению, геттер не реагирует. Наверное, потому что это вложенный объект. Это мой текущий метод получения: 

 get someGetter() {
    if (!this.context.rootState.auth.user) {
      return []
    }
    const userId = this.context.rootState.auth.user.id as string
    const arr = []
    for (const item of this.items) {
        // Using userId to add something to arr
    }
    return arr
  }

Есть ли способ принудительно заставить nuxt завершить аутентификацию sh перед инициализацией vuex-модулей или сделать этот метод получения реактивным, поэтому он будет запускаться снова, когда объект пользователя доступен?

Вот так выглядит мой auth-config в nuxt.config.ts: 

auth: {
  strategies: {
    local: {
      _scheme: '@/auth/local-scheme',
      endpoints: {
        login: {
          url: '/api/authenticate',
          method: 'post',
          propertyName: false
        },
        logout: { url: '/api/logout', method: 'post' },
        user: { url: '/api/users/profile', propertyName: false }
      }
    },
    // This dummy setting is required so we can extend the default local scheme
    dummy: {
      _scheme: 'local'
    }
  },
  redirect: {
    logout: '/login'
  }
}

EDIT

Я решил это следующим ответом Райхана Кабира . Использование vuex-persistedstate в модуле аутентификации, который запускается каждый раз, когда сервер отображает страницу. Плагин сохраняет идентификатор пользователя в кулинарии ie, поэтому магазин может использовать его как запасной вариант, если модуль авторизации не готов.

1 Ответ

4 голосов
/ 11 февраля 2020

Дело в том, что vuex очищает данные при перезагрузке / обновлении sh для обеспечения безопасности учетных данных. Вот что такое vuex. Если вы хотите хранить данные в течение длительного времени без прерывания после перезагрузки, вы должны использовать для этого localstorage . Но localstorage не рекомендуется для хранения учетных данных.

Если вам нужно только user_id, чтобы сохранить в vuex, используйте Cook ie. И попробуйте что-нибудь подобное в файле index.js вашего магазина - 

export const actions = {
    // This one runs on the beginning of reload/refresh
    nuxtServerInit ({ commit }, { req }) {
        if (req.headers.cookie) {
              const parsed = cookieparser.parse(req.headers.cookie)
              try {
                  // get user id that you would set on auth as Cookie
                  user_id = parsed.uid
              } catch (err) {
                  // error here...
              }
        }

        // perform login and store info on vuex store
        commit('authUserOnReload', user_id)
    },
}

// Define Mutations
export const mutations = {
    authUserOnReload (state, user_id) {
        // perform login here and store user
    }
}
...