通过 Gatsby 传递 firebase 全局道具

如何解决通过 Gatsby 传递 firebase 全局道具

我对所有这些程序都很陌生，现在我正在尝试允许我的登录、注册和仪表板页面访问 firebase 功能。我一直遇到的问题是我通常只使用 react-router 通过模板传递道具，但我不知道如何为 Gatsby 中的页面执行此操作。我应该将我的函数放在 gatsby-browser.js 还是我的索引中？正如我所说，我对所有这些都很陌生，我不知道从哪里开始任何帮助将不胜感激。如果需要任何其他信息，请告诉我。

Index.js - 目前有我需要的 firebase 函数

import Navbar from "../components/navbar";
import BackGround from "../components/bg";
import FactGen from "../components/factGen.js";
import "../css/App.css";
import "../css/BackGround.css";
import fire from "../components/fire";

const Index = () => {
  const [user,setUser] = useState("");
  const [email,setEmail] = useState("");
  const [password,setPassword] = useState("");
  const [emailError,setEmailError] = useState("");
  const [passwordError,setPasswordError] = useState("");
  const [hasAccount,setHasAccount] = useState(false);

  const clearInputs = () => {
    setEmail("");
    setPassword("");
  };

  const clearErrors = () => {
    setEmailError("");
    setPasswordError("");
  };

  const handleLogin = () => {
    clearErrors();
    fire
      .auth()
      .signInWithEmailAndPassword(email,password)
      .catch((err) => {
        switch (err.code) {
          case "auth/invalid-email":
          case "auth/user-disabled":
          case "auth/user-not-found":
            setEmailError(err.message);
            break;
          case "auth/wrong-password":
            setPasswordError(err.message);
            break;
        }
      });
  };

  const handleSignup = () => {
    clearErrors();
    fire
      .auth()
      .createuserWithEmailAndPassword(email,password)
      .catch((err) => {
        switch (err.code) {
          case "auth/email-already-in-use":
          case "auth/invalid-email":
            setEmailError(err.message);
            break;
          case "auth/weak-password":
            setPasswordError(err.message);
            break;
        }
      });
  };

  const handlelogout = () => {
    fire.auth().signOut();
  };

  const authListener = () => {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        clearInputs();
        setUser(user);
      } else {
        setUser("");
      }
    });
  };

  useEffect(() => {
    authListener();
  },[]);

  return (
    <div className="App">
      <BackGround />
      <Navbar />
      <Home />
    </div>
  );
};

const Home = () => {
  const [refresh,setRefresh] = useState(0);
  const refresher = () => {
    setRefresh(refresh + 1);
    console.log(refresh);
  };

  return (
    <div>
      <FactGen key={refresh} />
      <center>
        <button className="generate-button" onClick={refresher}>
          Generate
        </button>
      </center>
    </div>
  );
};

export default Index;

Signup.js - 登录和注册中的道具均来自之前的测试

import { Link,navigate } from "gatsby";
import BackGround from "../components/bg";
import Navbar from "../components/navbar";
import "../css/Login.css";
import Index from "./index";
const Signup = (
  props,user,email,setEmail,emailError,password,setPassword,passwordError,setHasAccount,hasAccount,handleSignup
) => {
  return (
    <div>
      <BackGround />
      <Navbar />
      {user ? <h1>User</h1> : <h1>No user</h1>}
      <section className="form-signin">
        <h2 className="form-signin-heading">Signup</h2>
        <label className="control-label form-labels">Email</label>
        <input
          className="form-input"
          placeholder="Enter email"
          type="text"
          autoFocus
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <p className="errorMsg">{emailError}</p>
        <label className="control-label form-labels">Password</label>
        <input
          className="form-input"
          placeholder="Enter password"
          type="password"
          required
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <p className="errorMsg">{passwordError}</p>
        <p className="AHAC">
          Already have an account?{" "}
          <Link
            className="AHAC"
            onClick={() => setHasAccount(!hasAccount)}
            to="/Login"
          >
            Sign In.
          </Link>
        </p>
        <center>
          <button className="form-button" onClick={handleSignup}>
            Signup
          </button>
        </center>
      </section>
    </div>
  );
};

export default Signup;

登录.js

import "../css/Login.css";
import { Link,navigate } from "gatsby";
import BackGround from "../components/bg";
import Navbar from "../components/navbar";
const Login = (
  props,handleLogin
) => {
  return (
    <div>
      <BackGround />
      <Navbar />
      {/* navigate("/dashboard") */}
      {user ? <h1>User</h1> : <h1>No user</h1>}
      <section className="form-signin">
        <h2 className="form-signin-heading">Login</h2>
        <label className="control-label form-labels">Email</label>
        <input
          className="form-input"
          placeholder="Enter email"
          type="text"
          autoFocus
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <p className="errorMsg">{emailError}</p>
        <label className="control-label form-labels">Password</label>
        <input
          className="form-input"
          placeholder="Enter password"
          type="password"
          required
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <p className="errorMsg">{passwordError}</p>
        <p className="AHAC">
          Not Registered?{" "}
          <Link
            onClick={() => setHasAccount(!hasAccount)}
            className="AHAC"
            to="/Signup"
          >
            Create an account.
          </Link>
        </p>
        <center>
          <button className="form-button" onClick={handleLogin}>
            Login
          </button>
        </center>
      </section>
    </div>
  );
};

export default Login;

仪表板.js

import BackGround from "../components/bg";
import Navbar from "../components/navbar";
const Dashboard = ({ handlelogout,user }) => {
  return (
    <div>
      <BackGround />
      <Navbar />
      {user ? <h1>User</h1> : <h1>no User</h1>}
      <h1 className="welcome-text">Welcome,User</h1>
      <h1 className="page-header">You have generated 100 Facts!</h1>
      <center>
        <button className="logout-button" onClick={handlelogout}>
          logout
        </button>
      </center>
    </div>
  );
};

export default Dashboard;

顺便说一句，我知道 firebase 功能正在运行，我已经使用 react-router 创建了工作站点，但我想尝试一下 Gatsby。