如何在React.JS中刷新后保持用户登录到firebase

npm install firebase

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  // 在此处填写你的Firebase配置信息
};

firebase.initializeApp(firebaseConfig);

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

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // 登录成功后的处理逻辑
      })
      .catch((error) => {
        // 处理登录错误
      });
  };

  return (
    <div>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default Login;

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

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

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((authUser) => {
      if (authUser) {
        // 用户已登录
        setUser(authUser);
      } else {
        // 用户未登录
        setUser(null);
      }
    });

    return () => unsubscribe();
  }, []);

  return (
    <div>
      {user ? (
        <p>用户已登录</p>
      ) : (
        <p>用户未登录</p>
      )}
    </div>
  );
};

export default App;