Question

技术：我正在将Firebase Auth与NextJS＆React结合使用。

问题：：已登录的用户只有在通过“下一步”路由在应用内导航时，才能正常使用具有Firebase身份验证的Web应用，无论何时刷新页面或打开新的帐户标签，都不会登录不再。

问题：这非常令人沮丧，因为此问题仅在生产中出现。在暂存和本地主机环境上根本没有问题。

firebase.js ：初始化firebase。

import getConfig from "next/config";
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/analytics';

const { publicRuntimeConfig } = getConfig();

export async function initializeFirebase() {
    if (!firebase.apps.length) {
        firebase.initializeApp(JSON.parse(publicRuntimeConfig.FIREBASE_CONFIG));

        if (publicRuntimeConfig.FIREBASE_ANALYTICS) {
            firebase.analytics();
        }
    }
}

export const auth = firebase.auth
export const db = firebase.firestore;
export default firebase;

AuthHoC.js ：为确保用户已连接，我用HOC包装页面。

export default App => (
    class AuthHoC extends App {
        _isMounted = false;

        constructor(props) {
            super(props)

            this.state = { 
                loading: false,
                isVerified: false,
                idToken: undefined,
                isAuthenticated: false
            }
        }


        async componentDidMount() {
            this._isMounted = true;
            await initializeFirebase();
            // onAuthStateChanged return a function that we'll use to unsubscribe our listener
            this.unsubscribeMethod = await auth().onAuthStateChanged(this._handleStateChange);
        }

        // is user is null, we're no longer authenticated
        _handleStateChange = (user) => {
            let that = this;
            if (user) {
                // NOT PASSING HERE ON PAGE REFRESH...
                user.getIdToken().then(function(idToken) { 
                    that.setState({
                        loading: true,
                        idToken: idToken,
                        isVerified: user.emailVerified,
                        isAuthenticated: !!user
                    });
                });
            } else {
                ...
            }
        }

        componentWillUnmount() {
            if (this.unsubscribeMethod) {
                this.unsubscribeMethod();
            }

            this._isMounted = false;
        }

        render() {
            return ( <>
                {this.state.loading ? 
                    <App {...this.props} {...this.state} /> 
                : 
                    ... loading ...
                }
            </> )
        }
});

_app.js ：（NextJS）使用高阶组件包装每页。

import App from "next/app";
import AuthHoC from '../utils/authentication/authHoC';

class MyApp extends App {
    render() {
        const { Component, pageProps, isAuthenticated, idToken, isVerified } = this.props;

        return (
            <Component 
                {...pageProps} 
                isAuth={isAuthenticated}
                idToken={idToken}  
                isVerified={isVerified}
            />
        );
    }
}

export default AuthHoC(MyApp);

可能是什么问题？所有这些代码都可以在localhost和登台URL上使用，而不能在生产环境上使用。

编辑：

我查明了问题所在，我只是通过临时切换生产密钥即可解决问题，这意味着问题并非来自Heroku或我的代码，而是我的Firebase配置本身。

主要区别在于产品使用分析。如果您有任何信息，我忘记配置任何建议都会有所帮助。

Firebase Auth，注销页面刷新

0 个答案: