यह बताना संभव नहीं है कि किसी पेज को लोड करना शुरू करने पर उपयोगकर्ता पर हस्ताक्षर किए जाएंगे या नहीं , हालांकि इसके आसपास कोई काम है।
आप सत्रों के बीच और टैब के बीच इसे बनाए रखने के लिए स्थानीयस्टोरेज में अंतिम स्थिति को याद कर सकते हैं।
फिर, जब पृष्ठ लोड होना शुरू होता है, तो आप आशावादी रूप से मान सकते हैं कि उपयोगकर्ता स्वचालित रूप से फिर से साइन इन किया जाएगा और संवाद को स्थगित कर देगा जब तक कि आप सुनिश्चित नहीं हो सकते (यानी onAuthStateChangedआग के बाद )। अन्यथा, यदि localStorageकुंजी खाली है, तो आप तुरंत संवाद दिखा सकते हैं।
पेज लोड होने के बाद फायरबेस onAuthStateChangedइवेंट लगभग 2 सेकंड फायर करेगा ।
// User signed out in previous session, show dialog immediately because there will be no auto-login
if (!localStorage.getItem('myPage.expectSignIn')) showDialog() // or redirect to sign-in page
firebase.auth().onAuthStateChanged(user => {
if (user) {
// User just signed in, we should not display dialog next time because of firebase auto-login
localStorage.setItem('myPage.expectSignIn', '1')
} else {
// User just signed-out or auto-login failed, we will show sign-in form immediately the next time he loads the page
localStorage.removeItem('myPage.expectSignIn')
// Here implement logic to trigger the login dialog or redirect to sign-in page, if necessary. Don't redirect if dialog is already visible.
// e.g. showDialog()
}
})
मैं
रिएक्ट और
प्रतिक्रिया-राउटर के साथ इसका उपयोग कर रहा हूं । मैंने
componentDidMountअपने ऐप रूट घटक में ऊपर कोड डाला । वहाँ, रेंडर में, मेरे पास कुछ है
PrivateRoutes
<Router>
<Switch>
<PrivateRoute
exact path={routes.DASHBOARD}
component={pages.Dashboard}
/>
...
और यह मेरे निजीकरण को कैसे लागू किया जाता है:
export default function PrivateRoute(props) {
return firebase.auth().currentUser != null
? <Route {...props}/>
: localStorage.getItem('myPage.expectSignIn')
// if user is expected to sign in automatically, display Spinner, otherwise redirect to login page.
? <Spinner centered size={400}/>
: (
<>
Redirecting to sign in page.
{ location.replace(`/login?from=${props.path}`) }
</>
)
}
// Using router Redirect instead of location.replace
// <Redirect
// from={props.path}
// to={{pathname: routes.SIGN_IN, state: {from: props.path}}}
// />
