如何在 React 应用程序中的每个页面重新加载时停止 firebase re-auth() ？

Question

所以我有一个使用 firebase auth 和 firestore 的很棒的 React 应用程序。一切正常，除了

每当我在用户已经登录时重新加载页面...导航栏链接就会改变一秒钟。看起来应用程序会在每个页面重新加载时自动重新登录（重新验证）用户。为什么这样？如何摆脱它？一些看起来相似的代码示例

import React, {useState, useEffect} from 'react';
import {Switch, Route} from 'react-router-dom'
import firebase from 'firebase/App'

export const App = () => {
    const [isAuth, setIsAuth] = useState()
    const auth = firebase.auth()

    useEffect(() => {
        auth.onAuthStateChanged(user => {
            if(user) {
                setIsAuth(true)
            } else {
                setIsAuth(false)
            }
        })
    }, [isAuth])

    return(
        <div className="App">
            <Navbar />
            <Switch>
                <Route to="/signIn" component={Login} />
                <Route to="/signUp" component={SignUp} />
                <Route to="/signOut" component={SignOut} />
            </Switch>
        </div>
    )
};

Answer 1

终于修好了。

发生这种情况的原因是 bcoz firebase 服务器在每个页面重新加载时验证用户，这需要一些时间并导致导航栏闪烁半秒。

解决方案只需三个简单步骤

1. 登录后，将用户作为布尔值存储在本地存储中。

    firebase.auth().onAuthStateChanged(user=>{
        if (user) {
            // store the user on local storage
            localStorage.setItem('user', true);
        } else {
            // removes the user from local storage on logOut
            localStorage.removeItem('user');
        }
    })
   

2. 在导航栏组件中检查本地存储中的用户

    const userLocal = JSON.parse(localStorage.getItem('user'));
    userLocal ? <SignedInLinks/> : <SignedOutLinks/>;
   

3. 注销时从本地存储中删除用户