使用电子邮件和密码使用 Firebase 验证 reactjs 网站

Question

我尝试使用电子邮件和密码使用 Firebase 创建身份验证网站。我什至无法加载登录页面。

这里是 Auth.js

import React, { useState, useEffect} from "react";
import { auth } from './config'
import { onAuthStateChanged } from "firebase/auth";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
    const [currentUser, setCurrentUser] = useState(null);

    useEffect(() => {
        onAuthStateChanged(auth, (user) => {
            setCurrentUser(user);
        })
    }, [])

    return (
        <AuthContext.Provider value={{currentUser}}>
            {children}
        </AuthContext.Provider>
    )
}

这是 Login.js

import React, {useContext ,useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import "./Login.css";
import { auth } from './config'
import { signInWithEmailAndPassword } from "firebase/auth";
import { AuthContext } from "./Auth";
import { useHistory } from "react-router-dom";

const Login = () => {
    let history = useHistory();

    const handleSubmit = (event) => {
        event.preventDefault();
        const { email, password } = event.target.elements;

        signInWithEmailAndPassword(auth, email.value, password.value)
            .then((userCredential) => {
                const user = userCredential.user;
                console.log(user.uid);
            })
            .catch((error) => {
                console.log(error.massage);
            });
    }

    const currentUser = useContext(AuthContext);
    if(currentUser) {
        return history.push('/dashboard');
     }

    return (
        <div className="Login">
            <h1>Login</h1>
            <Form onSubmit={handleSubmit}>
                 //Login Form
            </Form>
        </div>
    );
}

export default Login

和 DashBoard.js

import React, {useContext} from 'react'
import { AuthContext } from './Auth'
import { auth } from './config'
import { signOut } from 'firebase/auth'
import { useHistory } from "react-router-dom";

const DashBoard = () => {
    const currentUser = useContext(AuthContext);
    let history = useHistory();

    if(!currentUser) {
        return history.push('/login');
    }

    const signOutFunc = () => {
        signOut(auth)
    }

    return (
        <div> 
            <div className='container mt-5'>
                <h1>Welcome</h1>
                <h2>If you see this you are logged in.</h2>
                <button className='btn btn-danger' onClick={signOutFunc}>Sign Out</button>
            </div>
        </div>
    )
}

export default DashBoard;

最后是App.js

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'

import Login from './Login'
import DashBoard from './DashBoard';
import { AuthProvider } from './Auth'

function App() {
  return (
    <AuthProvider>
       <Router>
          <Switch>
              <Route exact path="/login" component={Login} />
              <Route exact path="/dashboard" component={Dashboard} />
          </Switch>
        </Router>
    </AuthProvider>
  );
}

export default App;

当我打开 /login 时，它会立即将我发送到 /dasgboard。如果我再次输入 /login 它会给我这个错误

错误：登录（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

我无法弄清楚它有什么问题。请帮我。 谢谢

Answer 1

您的代码中有多个位置是 return history.push('/dashboard'); 或其他路径。你应该返回null：

if(!currentUser) {
   history.push('/login');
   return null
}