Reactjs 在Firebase OnAuthState更改填充状态导致再次登录页面之前重定向到专用路由

登录时，重定向速度比从

onAuthStateChanged（）

更新状态快。你如何处理这种行为

//firebase/index.js
从“React”导入React，{createContext}
从“firebase/app”导入*作为firebase；
导入“firebase/firestore”；
导入“firebase/auth”；
常量firebaseConfig={
apiKey:process.env.REACT\u APP\u FIREBASE\u API\u KEY，
authDomain:process.env.REACT\u APP\u FIREBASE\u AUTH\u DOMAIN，
projectId:process.env.REACT\u APP\u FIREBASE\u PROJECT\u ID
};
const app=firebase.initializeApp（firebaseConfig）；
导出默认应用程序
export const FirebaseContext=createContext（{}）
export const FirebaseProvider=FirebaseContext.Provider

//index.js
从“/firebase”导入firebase，{FirebaseProvider}

//App.js
常量应用=（）=>{
const firebase=useContext（FirebaseContext）
const[auth，setAuth]=useState（{loading:true，user:null}）
useffect（（）=>{
const unsubscribe=firebase.auth（）.onAuthStateChanged（函数（用户）{
console.log（用户）
如果（用户）{
console.log（“登录”）
setAuth（{loading:false，user}）
}否则{
console.log（“未登录”）
setAuth（{…auth，加载：false}）
}
});
return（）=>{
取消订阅（）；
}
}, [])
返回(
...

//signin.js
从“React”导入React，{useState，useContext}；
从“react router dom”导入{withRouter}；
从“../firebase”导入{FirebaseContext}
常量符号=（{history}）=>{
const[state，setState]=useState（{}）
const[alert，setAlert]=useState（false）
const firebase=useContext（FirebaseContext）
常量符号=（）=>{
火基
.auth（）
.signInWithEmailAndPassword（state.email，state.password）
.然后（（）=>{
历史。推送（“/private”）
})
.catch（函数（错误）{
...
})
}
返回(
...
)
}
使用路由器导出默认值（登录）

//privaterout.js
const privaterout=（{auth，comp:Component，…rest}）=>{
返回(
授权加载
? 
：！！auth.user
? 
: 
}
/>
)
}

当我成功登录时（没有错误消息，并且网络

getAccountInfo

正在使用用户信息进行响应），则

history.push

正在重定向，但

private-route

将我重新重定向到

/signin

，而不是

/private

路由。如果我手动更改URL并加载

/private

路由，则我已登录

这是控制台：

// go to /private when not logged in -> redirected to /signin = OK

App.js: null
App.js: not logged in
PrivateRoute.js: {loading: false, user: null}

// on /signin page, fill form and submit

PrivateRoute.js: {loading: false, user: null}
App.js: P {N: Array(0), l: ... }
App.js: logged in

// go to /private by typing it in the browser

PrivateRoute.js: {loading: true, user: null}
App.js: P {N: Array(0), l: ... }
App.js: logged in
PrivateRoute.js: {loading: false, user: P { ... }} <-- the /private page is now rendered

//未登录时转到/private->重定向到/signin=OK
App.js:null
App.js:未登录
PrivateRoute.js:{加载：false，用户：null}
//在“登录”页上，填写表格并提交
PrivateRoute.js:{加载：false，用户：null}
App.js:P{N:Array（0），l:…}
App.js：已登录
//通过在浏览器中键入转到/private
PrivateRoute.js:{加载：true，用户：null}
App.js:P{N:Array（0），l:…}
App.js：已登录
PrivateRoute.js:{loading:false，user:P{…}}
useEffect将始终在第一次呈现后运行，因此您将始终处于注销状态，这将导致登录和私有页面之间的快速重定向。您应该在本地存储上保留用户身份验证数据，并在呈现之前立即使用它（而不是将其设置为useEffect）；这样，如果用户已通过身份验证，则无需每次访问都获取此数据
const[auth，setAuth]=useState（{loading:true，user:localStorage.getItem（'user'）}）

您还需要在注销或身份验证失败后清理localStorage，以防止错过重定向。
useEffect将始终在第一次呈现后运行，因此您将始终处于注销状态，这将导致登录和专用页之间的快速重定向。您应将用户身份验证数据保留在localStorage上，并立即使用它在呈现之前（不要将其设置为useEffect）；这样，如果用户已通过身份验证，则无需每次访问都获取此数据

const[auth，setAuth]=useState（{loading:true，user:localStorage.getItem（'user'）}）

您还需要在注销或身份验证失败后清除本地存储，以防止错过重定向。
您是否尝试过在加载状态下阻止重定向到登录页面？是的，但我遇到的情况与PrivateRoute相同，其中加载为false。。或者我错过了什么？您是否尝试过阻止重定向到登录页面关于加载状态的页面？是的，但我被困在与PrivateRoute相同的情况下，加载是错误的……或者我遗漏了什么？