auth.currentuser显示为null

Question

当用户被登录时，我正在尝试显示注销按钮。 这是我正在使用的Navbar。

import React,{useEffect, useState} from 'react'
import { Link, useNavigate } from 'react-router-dom';
import { auth } from '../firebase';

{auth.currentUser ?
                        <>
                            <Link className="btn btn-primary" to="/profile">Profile</Link>
                            <Link className="btn btn-primary">Logout</Link>
                        </>
                        :
                        <>
                            <Link className="btn btn-primary mx-2" to="/register">Register</Link>
                            <Link className="btn btn-primary" to="/login">Login</Link>
                        </>
                    }

这是firebase配置

import { initializeApp } from "firebase/app";
import {getAuth} from 'firebase/auth';  // getting auhtentication from firebase
import {getFirestore } from 'firebase/firestore'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_ID,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_ID
};


// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);  // now we will export this to use for authentication
const db = getFirestore(app);


export {auth, db};

Answer 1

Firebase身份验证会自动将用户凭据存储在大多数浏览器中，并在页面/应用重新加载时还原它们。但这要求它拨打服务器（例如，检查帐户是否被禁用），这需要时间。当您的代码检查CurrentUser时，对服务器的调用尚未完成时，因此Currentuser is null。

为了解决此问题，您需要使用所谓的AUTH状态侦听器获取通知并响应身份验证状态的任何更改。作为获得当前的uner 显示：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});