Nuxt Firebase身份验证中间件

JavaScript Vue.js

米亚

2020-04-03

我使用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)
        }

第3939篇《Nuxt Firebase身份验证中间件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
老丝阿飞 2020.04.03

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android