이다 수없는 사용자 여부를 알려 의지 작업은 약하지만 거기, 페이지가 로딩이 시작될 때 서명.
당신은 할 수 있습니다 마지막으로 인증 상태를 기억 세션 사이에 탭 사이를 유지하는 로컬 스토리지에.
그런 다음 페이지가로드되기 시작하면 사용자가 자동으로 다시 로그인 될 것이라고 낙관적으로 가정하고 확신 할 수있을 때까지 (즉, onAuthStateChanged
실행 후 ) 대화를 연기 할 수 있습니다 . 그렇지 않으면localStorage
키가 비어 있으면 즉시 대화 상자를 표시 할 수 있습니다.
firebase 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()
}
})
나는 이것을
React 및
react-router 와 함께 사용 하고 있습니다. 위의 코드
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')
// 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}}}
// />