เป็นไปไม่ได้ที่จะบอกได้ว่าผู้ใช้จะได้รับการลงชื่อเมื่อหน้าเริ่มโหลด แต่ก็มีวิธีแก้ไข
คุณสามารถจดจำสถานะการตรวจสอบสิทธิ์ล่าสุดไปยัง localStorage เพื่อคงอยู่ระหว่างเซสชันและระหว่างแท็บ
จากนั้นเมื่อหน้าเริ่มโหลดคุณสามารถสันนิษฐานได้ในแง่ดีว่าผู้ใช้จะลงชื่อเข้าใช้ใหม่โดยอัตโนมัติและเลื่อนกล่องโต้ตอบออกไปจนกว่าคุณจะแน่ใจได้ (เช่นหลังจากonAuthStateChanged
ไฟไหม้) มิฉะนั้นหากlocalStorage
คีย์ว่างเปล่าคุณสามารถแสดงกล่องโต้ตอบได้ทันที
onAuthStateChanged
เหตุการณ์firebase จะเริ่มทำงานประมาณ2 วินาทีหลังจากการโหลดหน้าเว็บ
if (!localStorage.getItem('myPage.expectSignIn')) showDialog()
firebase.auth().onAuthStateChanged(user => {
if (user) {
localStorage.setItem('myPage.expectSignIn', '1')
} else {
localStorage.removeItem('myPage.expectSignIn')
}
})
ฉันใช้นี้กับ
การตอบสนองและตอบสนองเราเตอร์
ฉันใส่รหัสด้านบนลงใน
componentDidMount
องค์ประกอบรากของแอป ในการเรนเดอร์ฉันมีบางส่วน
PrivateRoutes
<Router>
<Switch>
<PrivateRoute
exact path={routes.DASHBOARD}
component={pages.Dashboard}
/>
...
และนี่คือวิธีการใช้งาน PrivateRoute ของฉัน:
export default function PrivateRoute(props) {
return firebase.auth().currentUser != null
? <Route {...props}/>
: localStorage.getItem('myPage.expectSignIn')
? <Spinner centered size={400}/>
: (
<>
Redirecting to sign in page.
{ location.replace(`/login?from=${props.path}`) }
</>
)
}