Блог

Я использую signInWithEmailAndPassword функцию Firebase для аутентификации, затем сохраняю access_token в localStorage, чтобы созданный мной Vuex getter обнаружил, что пользователь вошел в систему, и, наконец, я заставляю маршрутизатор перейти к компоненту Vue, который есть в маршрутизаторе requiresAuth: true .

Однако это не работает, потому что, по-видимому, средство получения LoggedIn будет изменено только после обновления страницы.

Я уже правильно построил свои функции регистрации и выхода из системы, но, похоже, эта функция не работает, несмотря на использование той же структуры кода, что и: -Вызовите функцию аутентификации firebase — Затем вызовите обещание, внутри которого есть перенаправление маршрутизатора — Наконец (вне обещания), выполните запрос, если применимо (добавьте пользователя в базу данных при регистрации).

Самое близкое, к чему я добрался, — это использование этой слегка альтернативной структуры:

 login () {
  firebase.auth().signInWithEmailAndPassword(this.username, this.password).catch(function(error) {
  // Handle Errors here.
  alert(error.code);
  alert(error.message);

  // ...

});
let token = (firebase.auth().currentUser.refreshToken)
localStorage.setItem('access_token', token)
console.log('firebase token: ', token)
this.$router.push({ name: 'home' })
}
  

Чего я бы ожидал, так это того, что я буду перенаправлен на компонент, требующий аутентификации. Это делается после того, как я обновлю и нажму на кнопку «Домой» (которая должна loggedIn быть true).

Как мне заставить его работать без обновления?

Чтобы обнаружить изменения в состоянии аутентификации пользователя, используйте onAuthStateChanged прослушиватель, как показано в документах:

 firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});
  

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