嗨，我還是 ReactJS 的新手，我剛剛開始使用 Firebase，我目前正在學習一個教程；我面臨的問題是，每次重繪 頁面時，我都會回傳登錄頁面，我還創建了受保護的路由來檢查用戶是否已登錄，但這不是情況，因為我一直在改變 onAuthStateChange() 以查看它是否沒有提前觸發，但我仍然被困在兔子洞中。
“注意我使用的是 firebase v9”
我的 userAuth() 背景關系
import { createContext, useContext, useEffect, useState } from "react";
import { auth } from '../config/firebase';
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
onAuthStateChanged,
confirmPasswordReset,
sendPasswordResetEmail,
GoogleAuthProvider,
signInWithPopup
} from 'firebase/auth';
const userAuthContext = createContext();
export function UserAuthContextProvider({children}){
const [user, setUser] = useState(null);
function signUp(email, password){
return createUserWithEmailAndPassword(auth, email, password);
}
function signIn(email, password){
return signInWithEmailAndPassword(auth, email, password);
}
function googleSignIn(){
const provider = new GoogleAuthProvider();
return signInWithPopup(auth, provider)
}
function logOut(){
return signOut(auth);
}
function forgotPassword(email){
return sendPasswordResetEmail(auth, email, {url:'http://localhost:3000/signin'});
}
function resetPassword(oobCode, newPassword){
return confirmPasswordReset(auth, oobCode, newPassword);
}
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
})
return () => {
unsubscribe();
}
},[]);
return (
<userAuthContext.Provider value={{
user,
signIn,
googleSignIn,
signUp,
logOut,
forgotPassword,
resetPassword}}
>
{children}
</userAuthContext.Provider>
)
}
export function UserAuth(){
return useContext(userAuthContext);
}
我的受保護路線
import { Redirect, Route } from "react-router-dom";
import { UserAuth } from "../../context/userAuth";
const ProtectedRoute = ({component: Component, ...rest}) => {
const {user} = UserAuth();
return (
<Route
{...rest}
render={(props) =>
user ? (
<Component {...props}/>
):(
<Redirect to="/signin"/>
)
}
/>
)
}
export default ProtectedRoute
我已經將 UserAuthContextProvider 包裝在 index.js 中
ReactDOM.render(
<UserAuthContextProvider>
<App />
</UserAuthContextProvider>,
document.getElementById('root')
);
uj5u.com熱心網友回復：
這很正常，當您重繪 頁面時，您會丟失應用程式的狀態。用來localstorage存放user。
useEffect(() => {
let unsubscribe;
const user = localStorage.getItem('user'); // <=== save the state in localStorage
if (user) {
setUser(JSON.parse(user));
} else {
unsubscribe = onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
localStorage.setItem('user', JSON.stringify(user));
});
}
return () => {
if(unsubscribe) unsubscribe();
};
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441450.html