Nuxt 新手 - Firebase 身份验证无法刷新

Question

我已经搜索并尝试了大量示例和不同的东西，但仍然完全停留在这里 - 我已经为此扯了 2 天的头发…… 我有一个常见的问题，如果我登录并单击链接，我的应用程序可以正常工作，但如果我直接在浏览器中刷新或点击 URL，Firebase 似乎认为我没有经过身份验证的会话。

编辑所以在想了更多之后，我认为这是因为刷新时，Vue server正在请求。单击链接时，客户端会发出请求...最大的区别是没有在服务器请求上设置或发送会话/cookie。 是触发重定向的解决方案吗？或者有没有办法在页面加载时发送浏览器的 cookie/会话？还是我在 Vue 和 Firebase 之间建立某种服务器到服务器的身份验证，然后通过 Vue/Vuex 管理登录状态？

这是 FB 返回的错误：

Error during getting LIST of presentations! FirebaseError: [code=permission-denied]: Missing or insufficient permissions. 

这是我正在做的事情：

首先在我的 store/index.js 中，我们解码用户数据的 cookie 并将其发送到一个名为 setUserLoggedIn 的操作（我知道我设置了两次相同的值，但为了完整性将其保留在那里 :)）

这段代码似乎按预期工作（即，它总是在 Nuxt 启动时执行。我们这样做是为了确保在我们做任何事情之前我们的 Vuex 存储中的 cookie 中有用户数据）。它解码 cookie/将预期值发送到 setUserLoggedin

    import { getUserFromCookie } from '@/helpers'
export const actions = {
  async nuxtServerInit({ dispatch }, { req }) {
    const user = getUserFromCookie(req)
    console.log('This code fires first with user ' + JSON.stringify(user))
    if (user) {
      console.log('Found a user cookie - maybe we can log them in')
      await dispatch('user/setUserLoggedin', {
        email: user.email,
        uid: user.user_id,
        thisUserid: user.user_id
      })
    }
  }
}

然后我们通过 2 个变更将登录状态和用户详细信息提交回 Vuex 的状态，然后确认用户使用 Firebase 登录的事实：

 setUserLoggedin({ commit }, user) {

    commit('LOGIN_STATUS', true)
    console.log(`Re-affirming login user object is ${JSON.stringify(user)}`)
    commit('LOGIN_USER', {
      loginInstanceId: 'a-key-to-track-each-login-session',
      useruniqueid: user.thisUserid,
      emailaddress: user.email,
      uid: user.thisUserid
    })
    return UserService.affirmLogin(user)
  },

最后，我尝试检查我是否与 Firebase 进行了会话（firebase.auth().currentUser 返回未定义）。使用其他 Firebase 命令来监听状态变化或类似的东西也没有运气......从字面上看，我尝试过的一切都是空白。

  async affirmLogin(myuser) {
    const currentUser = await firebase.auth().currentUser
    console.table(currentUser)
  },

我也在设置一个带有 Firebase 令牌的令牌

await firebase
        .auth()
        .signInWithEmailAndPassword(user.emailaddress, user.password)
        .then(() => {
          firebase.auth().onAuthStateChanged(user => {
            currentUser = user.uid
          })
        })
      const token = await firebase.auth().currentUser.getIdToken(true)
      Cookies.set('access_token', token) // saving token in cookie for server rendering

我已经尝试了上百万种不同的方法 - 从配置我的 Vuex 状态/getter 和 Firebase 命令，到注释我的代码的生命、调试等，但我无法找出原因这行不通。 Firebase 似乎在刷新时忽略或看不到任何现有会话，尽管我有一个 cookie 并且我认为数据在 Vuex 存储中。

但是，如果我通过 UI 导航到的页面点击上面的路线（即我让表单提交按钮点击确认登录），它确实有效。

我认为问题在于我的会话有问题，但我看不出它可能是什么。我也不确定 Firebase 应该如何在刷新时收集用户 ID。我见过的其他例子似乎“只是工作”，但不适合我:(非常感谢任何帮助！

谢谢

Answer 1

TBH 我不知道 Vue、Nuxt、 或 Firebase，但我的第一个猜测是，当您要求 Firebase 返回 currentUser 时，它是尚未完全初始化或类似的东西。 Firebase 文档似乎同意：

注意：currentUser 也可能为 null，因为 auth 对象尚未完成初始化。如果您使用观察者来跟踪用户的登录状态，则无需处理这种情况。

您是否尝试过使用身份验证状态观察器？它看起来像这样：

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

我建议您尽早在代码中进行设置，以确保您不会错过身份验证状态更改。你可以从这样的开始：

setUserLoggedin({ commit }, user) {
  const userPromise = new Promise((resolve, reject) => {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        console.log('got user', user);
        resolve(true);
      } else {
        // No user is signed in.
        resolve(false);
      }
    });
  });

  commit('LOGIN_STATUS', true);

  console.log(`Re-affirming login user object is ${JSON.stringify(user)}`);
  commit('LOGIN_USER', {
    loginInstanceId: 'a-key-to-track-each-login-session',
    useruniqueid: user.thisUserid,
    emailaddress: user.email,
    uid: user.thisUserid,
  });

  return userPromise;
}

我很确定这不足以作为最终解决方案，但它可能会帮助您走上正确的轨道如果我的猜测是正确的。

Answer 2

我有同样的问题，刷新或重新加载后收到未经身份验证的错误，问题来自用户端点的propertyName，如果你直接返回用户，而不是对象'user':{...}，你应该把propertyName : false放在nuxt的auth选项中config，你可以通过直接执行这段代码来检查auth会收到什么结果

let user = await this.$auth.requestWith(    
    'local',    //strategy name
    null,       //endpoint
    { url: '/api/user', method: 'get', propertyName: false } // options.endpoints.user
);