Öyle mümkün değildir , bir kullanıcı olup olmadığını söylemek için olacak bir çalışma etrafında olsa, orada bir sayfa yükleme başladığında imzalanacak.
Şunları yapabilirsiniz geçen yetkilendirme durumunu ezberlemek oturumları arasında ve sekmeler arasında bunu devam etmek localStorage için.
Ardından, sayfa yüklenmeye başladığında, iyimser bir şekilde kullanıcının otomatik olarak yeniden oturum açacağını varsayabilir ve emin oluncaya kadar iletişim kutusunu erteleyebilirsiniz (yani onAuthStateChangedyangınlardan sonra ). Aksi takdirde, localStorageanahtar boşsa, iletişim kutusunu hemen gösterebilirsiniz.
Firebase onAuthStateChangedolayı, bir sayfa yüklendikten yaklaşık 2 saniye sonra tetiklenir .
if (!localStorage.getItem('myPage.expectSignIn')) showDialog()
firebase.auth().onAuthStateChanged(user => {
if (user) {
localStorage.setItem('myPage.expectSignIn', '1')
} else {
localStorage.removeItem('myPage.expectSignIn')
}
})
Bunu
React ve
react-router ile kullanıyorum . Yukarıdaki kodu
componentDidMountUygulama kök bileşenimin içine koydum . Orada, renderda biraz var
PrivateRoutes
<Router>
<Switch>
<PrivateRoute
exact path={routes.DASHBOARD}
component={pages.Dashboard}
/>
...
Ve PrivateRoute şu şekilde uygulanır:
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}`) }
</>
)
}