So i am building a React+redux app using firebase. I'm using react-router onEnter callback function(checkAuth) for route protection.
export default function getRoutes (checkAuth) {
return (
<Router history={browserHistory}>
<Route path='/' component={MainContainer}>
<IndexRoute component = {HomeContainer} onEnter = {checkAuth}/>
<Route path='auth' component = {AuthenticateContainer} onEnter = {checkAuth} />
<Route path='feed' component = {FeedContainer} onEnter = {checkAuth} />
<Route path='logout' component = {LogoutContainer} />
</Route>
</Router>
)
}
the checkAuth function calls checkIfAuthed function to see if there is a currentUser.
function checkAuth (nextState, replace) {
const isAuthed = checkIfAuthed(store)
console.log('isAuthed from checkAuth method', isAuthed)
const nextPathName = nextState.location.pathname
console.log('nextPathName', nextPathName)
// debugger
if (nextPathName === '/' || nextPathName === 'auth') {
if (isAuthed === true) {
// debugger
replace('feed')
}
} else {
// debugger
if (isAuthed !== true) {
// debugger
replace('auth')
}
}
}
ReactDOM.render(
<Provider store = {store}>
{getRoutes(checkAuth)}
</Provider>,
document.getElementById('app')
)
The checkIfAuthed function looks like this:
export function checkIfAuthed (store) {
// debugger
// const user = firebase.auth().currentUser
firebase.auth().onAuthStateChanged((user) => {
console.log('isAuthed from on state changed', user)
// debugger
if (user === null) {
// debugger
return false
} else if (store.getState().isAuthed === false) {
// debugger
const userInfo = formatUserInfo(user.displayName, user.photoURL, user.uid)
// debugger
store.dispatch(authUser(user.uid))
// debugger
store.dispatch(fetchingUserSuccess(user.uid, userInfo))
// debugger
return true
}
// debugger
return true
})
}
However, const isAuthed is always undefined at runtime in the checkAuth() function.thus leading to replace("feed") never running. I was expecting it to be false or true.
Additionally if I instead use const user = firebase.auth().currentUser in the checkIfAuthed function the Replace function runs but this requires user to hit login button, whereas the firebase observer above automatically runs.
You can check here this implementation
The Service when we read the user auth and set the value to Redux https://github.com/x-team/unleash/blob/develop/app/services/authService.js
The reducer when set the user state to the redux state object https://github.com/x-team/unleash/blob/develop/app/reducers/userReducer.js
The action creators https://github.com/x-team/unleash/blob/develop/app/actions/UserActions.js
The login state check https://github.com/x-team/unleash/blob/develop/app/components/UnleashApp.jsx#L17
The most important part is the authService, let me know any question
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.