為什么用戶在刷新時被重定向到登錄頁面？

Question

好的，有這個簡單的 REACTJS 應用程序，其中使用了 firebase。

登錄后一切正常，除非您點擊刷新圖標。 在您執行此操作的那一刻，它會將您重定向到之前要求您登錄的位置。 這就是這位新生代程序員要解決的問題！

我可以給你以下代碼片段：

1. 這是登陸頁面

function Landing() {

    const [{ }, dispatch] = useStateValue();

    firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE)
        // .then(function () {
        //     console.log("successfully set the persistence");

        //     return firebase.auth().signInWithPopup(provider);

        // })
        .catch(function (error) {
            console.log("failed to ser persistence: " + error.message)
        });


    firebase.auth().onAuthStateChanged((user) => {
        if (user) {
            console.log('user is logged in');

        } else {
            console.log('user is logged out now')

        }
    });
    const signIn = () => {
        auth
            .signInWithPopup(provider)
            .then((result) => {
                dispatch({
                    type: actionTypes.SET_USER,
                    user: result.user

                })
            }).catch((error) => alert(error.message))
    }

2. reducer.js 片段

export const initialState = {
    user: null,
}

export const actionTypes = {
    SET_USER: 'SET_USER',
    LOGOUT_USER: 'LOGOUT_USER'
}

const reducer = (state, action) => {
    console.log(action)
    switch (action.type) {
        case actionTypes.SET_USER:
            return {
                ...state,
                user: action.user,
            }


        case actionTypes.LOGOUT_USER:
            return {
                ...state,
                user: null,
            }

        default:
            return state;

3. 這是 firebase.js

是的，這里使用的是 Google 身份驗證

import firebase from 'firebase';



// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    //config
};

// const user = firebase.auth().currentUser;
// console.log(user);

const firebaseApp = firebase.initializeApp(firebaseConfig)

const db = firebaseApp.firestore();
const storage = firebase.storage();
const auth = firebaseApp.auth();
const provider = new firebase.auth.GoogleAuthProvider();





export default db;
export { auth, provider, storage }

4. 最后是 app.js

function App() {

  const [{ user }, dispatch] = useStateValue();

  console.log(user);
  
  return (
    <div className="app">


      {!user ? (
        <Landing />
      ) : (
        <App />
)


</div>

非常感謝您對此事的關注！

哦，順便說一下，下面這個問題也與此有關。 它可能會幫助您更好地了解這個問題。 所以一定要看看那個！

如何使用 firebase 保持登錄用戶？

再次感謝！

Answer 1

示例代碼。 工作

import firebase from 'firebase/app';
import 'firebase/auth';
import { useEffect, useState } from 'react';

import firebaseConfig from './firebase-config';

const firebaseApp = firebase.initializeApp(firebaseConfig);
const googleProvider = new firebase.auth.GoogleAuthProvider();

firebaseApp.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
  .then(function () {
    // return firebaseApp.auth().signInWithPopup(googleProvider)
  })
  .catch(function (error) {
    console.log(error)
  });
function App() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    firebaseApp.auth().onAuthStateChanged((res) => {
      console.log("onAuthStateChanged", res)
      if (res) {
        setUser(res)
        // console.log('user is logged in', user);
      } else {
        setUser(null)
        // console.log('user is logged out now')

      }
    });
  }, [])

  const signInWithGoogle = (e) => {
    firebaseApp.auth()
      .signInWithPopup(googleProvider)
      .then((result) => {
        // console.log(result)
        // setUser(result.additionalUserInfo)
      }).catch(err => {
        // console.log(err)
      })
  }
  const signOut = (e) => {
    firebaseApp.auth().signOut()
  }
  return (
    <div>
      <h1>Firebase Authentication</h1>
      {
        user
          ? (
            <div>
              <p>Hello, {user.displayName}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
          )
          : (
            <div>
              <p>Please sign in.</p>
              <button onClick={signInWithGoogle}>Sign in with Google</button>
            </div>
          )
      }

    </div>
  );
}

export default App;