Я все еще начинающий, поэтому прошу прощения за любые ошибки.
Я использую "официальный" модуль firebase для nuxt https://firebase.nuxtjs.org/ для доступа к службам firebase, таким как вход с авторизацией и singOut.
Это работает.
Тем не менее, я использую nuxt в универсальном режиме и не могу получить к нему доступ в своей функции выборки страниц. Поэтому мое решение - сохранить эту информацию в хранилище vuex и обновлять ее по мере ее изменения.
Итак, когда пользователь вошел в систему или изменилось состояние авторизации firebase, в хранилище vuex должно произойти изменение состояния. .
В настоящее время, когда пользователь входит в систему или изменяется состояние авторизации firebase, если пользователь все еще находится в системе, я сохраняю состояние в своем хранилище следующим образом:
const actions = {
async onAuthStateChangedAction(state, { authUser, claims }) {
if (!authUser) {
// claims = null
// TODO: perform logout operations
} else {
// Do something with the authUser and the claims object...
const { uid, email } = authUser
const token = await authUser.getIdToken()
commit('SET_USER', { uid, email, token })
}
}
}
Я также у меня есть мутация, в которой установлено состояние, метод получения, чтобы получить состояние и фактический объект состояния, а также для хранения начального состояния:
const mutations = {
SET_USER(state, user) {
state.user = user
}
}
const state = () => ({
user: null
})
const getters = {
getUser(state) {
return state.user
}
}
Моя проблема в том, что на многих моих страницах я использую метод fetch для извлечения данных из API, а затем я сохраняю эти данные в своем хранилище vuex.
Этот метод fetch использует ax ios для вызова API, например:
async fetch({ store }) {
const token = store.getters['getUser'] //This is null for a few seconds
const tempData = await axios
.post(
my_api_url,
{
my_post_body
},
{
headers: {
'Content-Type': 'application/json',
Authorization: token
}
}
)
.then((res) => {
return res.data
})
.catch((err) => {
return {
error: err
}
console.log('error', err)
})
store.commit('my_model/setData', tempData)
}
Ax ios нужен мой идентификатор пользователя Firebase как часть заголовков, отправленных в API для авторизации.
Когда запускается метод выборки, состояние еще не всегда изменялось или обновлялось, и, следовательно, состояние пользователь по-прежнему нулевой до Состояние изменилось, что обычно составляет около секунды, что является проблемой для меня, так как мне нужен этот токен из магазина для выполнения моего вызова API.
Как я могу ждать, пока состояние store.user FINI sh Обновление / не быть нулевым, прежде чем сделать мой топор ios API-вызов внутри моего метода извлечения?
Я рассмотрел использование куки для хранения этой информации, когда пользователь входит в систему. Затем, когда внутри Метод получения, я могу использовать повар ie, чтобы получить токен, вместо того, чтобы ждать, пока состояние изменится. Проблема, с которой я столкнулся при таком подходе, заключается в том, что cook ie также должен ждать изменения состояния, прежде чем обновлять свой токен, что означает, что он будет использовать старый токен при начальной загрузке страницы. Я все еще мог бы выбрать это решение, но мне кажется, что это неправильный подход. Есть ли лучший способ справиться с этим типом головоломки?
Кроме того, когда внутри извлечения, первая загрузка будет производиться с сервера, поэтому я могу получить токен от повара ie, однако следующий нагрузка будет с клиента, так как же мне получить токен, если при загрузке значение хранилища все еще будет нулевым?
РЕДАКТИРОВАТЬ:
Я выбрал режим SPA. После долгих раздумий я не нуждаюсь в сервере nuxt, и режим SPA имеет «серверное» поведение, при котором вы все еще можете использовать asyncdata и извлекать данные для извлечения данных до отображения страниц, промежуточное ПО по-прежнему работает аналогично и аутентификация фактически работает там, где вам не нужно держать клиента и сервер в синхронизации c с маркерами доступа и c. Я все еще хотел бы видеть лучшее решение для этого в будущем, но пока режим SPA работает отлично.