Nuxt Firebase身份驗證中間件

Question

我使用Nuxt（vue）作為前端，使用Firestore和Authentication作為后端。 我可以進行一定程度的身份驗證，但是我的問題是刷新瀏覽器會重置狀態，因此我的中間件返回錯誤結果。

這里是一些代碼片段：

中間件：

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()
        })
    })
}

現在，這在運行App時有效，但是當有人刷新需要身份驗證的頁面時，它無法正常工作並重定向到/，現在我不知道如何解決該問題，將不勝感激，如果您需要更多代碼，則可以提供它。

編輯1：

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

            commit('setCurrentUser', user)
        }

Answer 1

您需要使用nuxtServerInit方法初始化您的用戶，否則您的中間件將在具有空用戶的服務器上執行，因此將發生重定向。

您需要從req對象獲取用戶數據。 請參閱此倉庫以獲取參考實現https://github.com/davidroyer/nuxt-ssr-firebase-auth.v2