Nuxt Firebase 身份验证中间件

Posted 2023-02-22

【中文标题】Nuxt Firebase 身份验证中间件

【英文标题】：Nuxt Firebase Authentication Middleware

【发布时间】：2019-02-27 05:11:53

【问题描述】：

我使用 Nuxt(vue) 作为前端，使用 Firestore 和身份验证作为后端。我让身份验证工作到一定程度，但我的问题是刷新浏览器会重置状态，因此我的中间件返回错误结果。

这里有一些代码sn-ps：

中间件：

export default function (store, redirect, route) 

    const userIsLoggedIn = !!store.state.currentUser; 

    if(!userIsLoggedIn) 
        return redirect ('/')
     

插件：

import  auth  from '@/services/firebaseInit.js'

export default (context) => 
    const  store  = context

    return new Promise((resolve, reject) => 
        auth.onAuthStateChanged(user => 
            store.commit('setCurrentUser', user)
            resolve()
        )
    )

现在这在运行应用程序中有效，但是当有人刷新您需要身份验证的页面时，它不起作用并重定向到 /，现在我不知道如何解决这个问题，希望您能提供帮助，如果您需要更多代码，那么我会提供它。

编辑 1：

   async nuxtServerInit ( commit ,  req ) 
            let user = await firebase.auth().currentUser

            commit('setCurrentUser', user)
        

【参考方案1】：

您需要在nuxtServerInit 方法中初始化您的用户，否则您的中间件将在空用户的服务器上执行，因此会发生重定向。

您需要从 req 对象中获取用户数据。请参阅此 repo 以获取参考实现https://github.com/davidroyer/nuxt-s-s-r-firebase-auth.v2

【讨论】：

请问可以进一步介绍吗？我根据您的回答编辑了我的帖子，并尝试了进一步的解决方案。

@Badgy 和 firbase.aut().currentUser 应该从哪里获取当前用户？显然服务器上不会有任何东西。您需要从 req 对象中获取所需的数据。请参阅此 repo 以获取一些参考资料github.com/davidroyer/nuxt-s-s-r-firebase-auth.v2

感谢您的链接和您的时间！