在静态模式下使用 Nuxt 和 Firebase Nuxt 模块进行身份验证中间件答案

【问题标题】：Auth middleware with Nuxt and Firebase Nuxt Module in Static Mode在静态模式下使用 Nuxt 和 Firebase Nuxt 模块进行身份验证中间件
【发布时间】：2021-08-26 19:25:13
【问题描述】：

我正在尝试在 Nuxt 应用程序中实现 Firebase（静态）。我安装了@nuxtjs/firebase，对其进行了配置，并使其与身份验证一起使用（登录和注销都有效）。我想在登录时锁定整个应用程序。

但是当我启用中间件时，应用程序崩溃了。这是因为，我认为，为了使模块在 SSR 中工作，还需要执行一些额外的步骤。我认为在服务器中，由于未设置用户，中间件会触发重定向，对吗？我怎样才能实现一个工作的中间件？

中间件代码auth.js:

export default function ({ store, redirect }) {
    if (!store.state.user) {
        return redirect('/login')
    }
}

店铺代码index.js

export const state = () => ({
    user: null,
    userData: {}
})

export const getters = {

}

export const mutations = {
    onAuthStateChangedMutation(state, {authUser}){
        if (!authUser) {
            state.user = null
        } else {
            const { uid, email } = authUser
            state.user = { uid, email }        
        }
    },

    setUserData(state, payload){
        state.userData = payload
    }
}

export const actions = {
    async onAuthStateChangedAction({commit}, {authUser}){
        if (!authUser) {
            state.userData = {}
        } else {
            try{
                const userRef = await this.$fire.firestore.collection('users').doc(authUser.uid).get()
                const userData = await userRef.data()
                commit('setUserData', userData)
            }
            catch(e){
                console.log(e)
            }
        }
    }
}

开启nuxt.config

  firebase: {
    services:{
      auth:{
        ssr: true,
        initialize:{
          onAuthStateChangedMutation: 'onAuthStateChangedMutation',
          onAuthStateChangedAction: 'onAuthStateChangedAction',
        }
      },
      firestore: true,
      analytics: true
    }
  },
  
  router:{
    middleware: 'auth'
  }

【问题讨论】：

标签： firebase firebase-authentication nuxt.js middleware

【解决方案1】：

我设法使它工作，合并 nuxtjs firebase 文档和我的用例上的信息。虽然如果有人有更好的想法或发现我的解决方案中的漏洞，请随时贡献：

店铺代码index.js

export const state = () => ({
    user: null,
    userData: null,
    isUserReady: false
})

export const getters = {

}

export const mutations = {
    onAuthStateChangedMutation(state, {authUser}){
        if (!authUser) {
            state.user = null
        } else {
            const { uid, email } = authUser
            state.user = { uid, email }
        }
    },

    clearUserData(state){
        state.isUserReady = false
        state.userData = null
    },

    setUserData(state, payload){
        state.userData = payload
        state.isUserReady = true
    }
}

export const actions = {
    async nuxtServerInit({ commit }, { res }) {
        if (res && res.locals && res.locals.user) {
            const { ...authUser } = res.locals.user
            commit('onAuthStateChangedMutation', { authUser })
        }
    },

    async onAuthStateChangedAction({commit}, {authUser}){
        if (!authUser) {
            commit('clearUserData')
        } else {
            try{
                const userRef = await this.$fire.firestore.collection('users').doc(authUser.uid).get()
                const userData = await userRef.data()
                commit('setUserData', userData)
            }
            catch(e){
                console.log(e)
            }
        }
    }
}

在nuxt.config.js

  firebase: {
    config:{
      ...
    },
    services:{
      auth:{
        initialize:{
          onAuthStateChangedMutation: 'onAuthStateChangedMutation',
          onAuthStateChangedAction: 'onAuthStateChangedAction',
        }
      },
      firestore: true,
    }
  },

  pwa: {
    manifest: {
      lang: 'en'
    },
    workbox: {
      importScripts: [
        '/firebase-auth-sw.js'
      ],
      dev: true
    }
  }

通过这些设置，我可以在 Netlify 上部署应用程序 (ssr: false, target: "static")，并且用户可以登录，即使页面重新加载，登录也是持久的。

【讨论】：