node.js - 使用电子邮件和密码使用 Firebase 验证 reactjs 网站
问题描述
我尝试使用电子邮件和密码使用 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。
我无法弄清楚它有什么问题。请帮我。谢谢
解决方案
您的代码中有多个位置return history.push('/dashboard');
或其他路径。你应该返回一个null
:
if(!currentUser) {
history.push('/login');
return null
}
推荐阅读
- rtmp - 如何使用 rtmp 服务器从实时流中逐帧提取
- android - 如何在 Firebase 中使用 PhoneAuthProvider 检测短信代码是否发送到另一台设备
- javascript - Javascript 中的 cURL POST 请求
- eclipse - 在 Eclipse 中使用 Maven 生成 Skinny War 文件
- python-3.x - 在散景的回调中动态更新多条线图
- javascript - json 值不接受特殊字符
- javascript - Angular - 调整大小更改 html 元素
- java - 如何告诉 assertJsonEquals 在比较时忽略一个字段
- javascript - 正则表达式仅输入允许的模式(输入文本)
- apache-nifi - Apache NiFi JoltTransformJSON processor attribute as jolt spec