文章/答案/技术大牛

发布

社区首页 >问答首页 >Firebase onAuthStateChange()不工作，在刷新时仍被重定向到登录页面

问Firebase onAuthStateChange()不工作，在刷新时仍被重定向到登录页面
EN

Stack Overflow用户

提问于 2022-03-11 12:48:34

回答 1查看 675关注 0票数 1

嗨，我对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')
);

reactjs

firebase

firebase-authentication

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-11 13:08:35

这是正常的，当你刷新页面时，你失去了应用程序的状态。使用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();
    };
  }, []);

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71438773

复制

相似问题

问Firebase onAuthStateChange()不工作，在刷新时仍被重定向到登录页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Firebase onAuthStateChange()不工作，在刷新时仍被重定向到登录页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Firebase onAuthStateChange()不工作，在刷新时仍被重定向到登录页面
EN