检查用户是否已登录或未在react中使用firebase

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

const App = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 初始化Firebase项目
    firebase.initializeApp({
      // 在这里填写你的Firebase配置
      apiKey: 'YOUR_API_KEY',
      authDomain: 'YOUR_AUTH_DOMAIN',
      // ...
    });

    // 监听用户登录状态变化
    firebase.auth().onAuthStateChanged((user) => {
      setUser(user);
    });
  }, []);

  const handleLogin = () => {
    // 打开登录弹窗或跳转到登录页面
    // ...
  };

  const handleLogout = () => {
    // 登出用户
    firebase.auth().signOut();
  };

  return (
    <div>
      {user ? (
        <div>
          <p>当前用户：{user.displayName}</p>
          <button onClick={handleLogout}>登出</button>
        </div>
      ) : (
        <div>
          <p>用户未登录</p>
          <button onClick={handleLogin}>登录</button>
        </div>
      )}
    </div>
  );
};

export default App;