3
Firebaseを使用してReact + reduxアプリケーションを構築しています。私は経路保護のために反応ルータonEnterコールバック関数（checkAuth）を使用しています。Firebase onAuthStateChangedがReact Appで期待通りに動作しない
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>
)
}
checkAuth機能があるCurrentUserがあるかどうかを確認するためにcheckIfAuthed関数を呼び出します。しかし、constのははcheckAuth（内、実行時に常に定義されていませんisAuthed
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
})
}
）」（フィードを置き換えるために有力function.thus：
checkIfAuthed機能は次のようになります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')
)
"）決して走っていない。私はそれが偽であるか真実であると予想していました。
さらに、checkIfAuthed関数ではconst user = firebase.auth（）。currentUserを使用すると、Replace関数が実行されますが、これはユーザーがログインボタンを押す必要がありますが、上のfirebase observerは自動的に実行されます。