我每次刷新都会注销,这是我使用的代码。没有什么特别的,只是简单的条件渲染。
是什么原因造成的?
我尝试使用set persistence,但这是给出错误。
export default function GAuth(){
const [currentUser, setCurrentUser] = useState(null);
let auth = getAuth();
let GoogleProvider = new GoogleAuthProvider()
function handleSubmit(event) {
event.preventDefault();
signInWithPopup(auth, GoogleProvider)
.then((response) => {setCurrentUser(response.user)})
.catch((err) => {alert(err.message)})
}
function authChecker(){
if(currentUser){
console.log("User is logged in")
return <FullApp/>
}else{
console.log("User is not logged in")
return (<div className="auth-page">
<form className="signup-form" onSubmit={handleSubmit}>
<h1>You have No Notes, Sign In to create one</h1>
<input className="first-note" type="submit" value={"Sign in with google"} />
</form>
</div>)
}
}
//returning objects to the DOM
return (
<div>
{authChecker()}
</div>
)
}
Firebase在大多数基于浏览器的环境中自动持久保存用户凭据并恢复它们。但是恢复它们需要它对服务器进行调用(例如检查帐户是否已被禁用),并且当您的代码检查currentUser
时,调用尚未完成。
这就是为什么您应该使用认证状态侦听器来在身份验证状态更改时获得通知,如文档中关于获取当前用户的第一个代码片段所示:
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
const uid = user.uid;
// ...
} else {
// User is signed out
// ...
}
});
这样,Firebase在完成恢复用户凭据时将自动调用处理程序,然后您可以更新UI以反映该状态。