NuxtJS状态更改和Firebase身份验证

Question

我仍然是nuxt初学者，所以请原谅任何错误。

我正在nuxt https://firebase.nuxtjs.org/使用“官方” firebase模块来访问诸如auth signIn和singOut之类的Firebase服务。

这有效。

但是，我在通用模式下使用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 })
    }
  }
}

我也有一个设置状态的变量，一个获取状态的getter和实际状态对象以及存储初始状态：

const mutations = {
  SET_USER(state, user) {
    state.user = user
  }
}

const state = () => ({
  user: null
})

const getters = {
  getUser(state) {
    return state.user
  }
}

我的问题是，在我的许多页面上，我都使用fetch方法从API中提取数据，然后将这些数据存储在vuex存储中。

此获取方法使用axios进行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)
 }

Axios需要我的Firebase用户ID令牌作为发送到API进行授权的标头的一部分。

[当获取方法运行时，状态尚未始终更改或更新，因此，在状态更改之前，用户的状态仍然为null，这通常是大约一秒钟，这对我来说是个问题需要商店中的令牌来进行我的api调用。

在获取方法内进行axios api调用之前，我如何等待store.user状态完成更新/不为null？

我曾考虑过在用户登录时使用cookie来存储此信息。然后，在fetch方法内部，我可以使用cookie来获取令牌，而不必等待状态更改。我使用这种方法的问题在于，cookie在更新其令牌之前还需要等待状态更改，这意味着它将在初始页面加载时使用旧的令牌。我可能仍会选择此解决方案，只是感觉这是解决此问题的错误方法。有没有更好的方法来处理这种难题？

而且，在内部获取时，第一次加载将从服务器进行，​​因此我可以从cookie中获取令牌，但是下一次加载将从客户端进行，因此，如果存储值是多少，我该如何检索令牌？加载时仍为null？

编辑：

我选择了SPA模式。经过漫长而认真的思考，我真的不需要nuxt服务器，并且SPA模式具有“类似服务器的”行为，您仍然可以使用asyncdata和fetch在页面呈现之前获取数据，中间件仍然可以工作，并且身份验证实际上可以在不需要使客户端和服务器与访问令牌等保持同步的情况下工作。将来我仍然希望看到一个更好的解决方案，但是现在SPA模式可以正常工作。

Answer 1

解决此问题的一种方法是在安装应用程序之前进行firebase登录。

从firebase获取令牌，将其保存在vuex中，并且仅在安装应用程序之后。这将确保在页面加载时，您将Firebase令牌保存在商店中。

为您希望在没有登录的情况下无法访问的页面添加路由检查，以在存储中查找令牌（一个或另一个火力地），如果不存在，则重定向到另一条路由。