Firebase: как refre sh idToken для http-запроса, если currentUser имеет значение null

Question

В настоящее время я использую React JS с Firebase для обработки операций входа.

Я и команда решили использовать способ Custom Auth System для входа в систему. Поэтому со стороны Back End мы генерируем собственный токен, а Front End выполняет вход через signInWithCustomToken.

Пока все работает как шарм, но как только я вошел в систему, если я обновлю sh страница, объект currentUser становится нулевым, поэтому у меня нет возможности вызывать на нем метод getIdToken (правда), чтобы обновить sh токен. Метод firebase.auth (). CurrentUser.getIdToken (true) вызывается каждый раз, когда я делаю http-запрос с ax ios (используя перехватчик для добавления поля авторизации в запрос). Если я вхожу и выполняю http-запрос без перезагрузки, он работает нормально, но если я переосмыслил sh, я получаю сообщение об ошибке, поскольку объект currentUser теряет свое содержимое и становится пустым.

Я потратил больше меньше 8 часов серфинга по Inte rnet в поисках решения. Я уже видел, как люди говорят, что решение состоит в том, чтобы взять пользователя внутри наблюдателя onAuthStateChanged , но проблема в том, что я не могу войти в наблюдателя , чтобы принять значение пользователя, когда Я делаю http-запрос, потому что наблюдатель - это не функция , которую я могу вызвать, когда мне нужно.

Также я попытался сохранить объект пользователя, возвращаемый onAuthStateChanged наблюдателем, когда он срабатывает ( во время входа или выхода), в localStorage, но пользовательский объект отличается от возвращенного и не имеет внутри proto функции getIdToken. Так что для меня это бесполезно.

Я также пытался использовать firebase.auth (). SetPersistence (firebase.auth.Auth.Persistence.SESSION), передавая ему пользовательский объект, возвращаемый наблюдателем onAuthStateChanged. , но ничего не изменилось.

Это код моего проекта:

****** AX IOS ЗАПРОС ИНТЕРЦЕПТОРА ******

instanceAXIOS.interceptors.request.use(
  async config => {
    const { refreshedToken } = await refreshUserTokenTEST()
    config.headers.Authorization = `Bearer ${ refreshedToken }`
    return config
  },
  error => Promise.reject(error)
)

****** REFRE SH TOKEN ******

const refreshUserTokenTEST = () => {
  try {
    return firebase
      .auth()
      .currentUser
      .getIdToken(true)
      .then(token => {
        return { status: 200, refreshedToken: token }
      })
      .catch(err => {
        console.error(err)
        return { status: 500, refreshedToken: null }
      })
  } catch (exc) {
    console.error("ERROR DURING TOKEN REFRESH")
    return { status: 404, refreshedToken: null }
  }
}

****** firebasePersistenceOption function ******

const firebasePersistenceOption = async (userObject) => {
  return firebase
    .auth()
    .setPersistence(firebase.auth.Auth.Persistence.SESSION)
    .then(function() {
      return userObject
    })
    .catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    })
}

****** onAuthStateChanged OBSERVER ******

firebase.auth().onAuthStateChanged(async function(user) {
  if (user) {
    console.log("LOGGED IN")
    await firebasePersistenceOption(user)
  } else {
    console.log("LOGGED OUT")
  }
})

Как я уже сказал, без перезагрузки страницы все работает нормально, поэтому в коде нет ошибок (я почти wi sh это было так).

Answer 1

Я наконец нашел решение проблемы. Благодаря предложениям @DougStevenson и обсуждению, найденному на GitHub , я смог написать функцию для получения обновленного токена id.

Это базовый c код:

// get the current user inside the observer
// then refresh the token
// and finally unsubscribe the observer

const getIdTokenRefreshed = async () => {
  return new Promise(async (resolve, reject) => {
    const unsubscribe = firebase
      .auth
      .onAuthStateChanged(user => {
        unsubscribe()
        const refreshedToken = await user
          .getIdToken(true)
          .catch(err => console.error(err))
        resolve(refreshedToken)
    }, reject)
  })
}