Firebase onAuthStateChanged 在 React App 中未按预期运行
Posted
技术标签:
【中文标题】Firebase onAuthStateChanged 在 React App 中未按预期运行【英文标题】:Firebase onAuthStateChanged not running as expected in React App 【发布时间】:2016-10-12 18:07:26 【问题描述】:所以我正在使用 firebase 构建一个 React+redux 应用程序。我正在使用 react-router onEnter 回调函数(checkAuth)进行路由保护。
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函数调用checkIfAuthed函数查看是否有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')
)
checkIfAuthed 函数如下所示:
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
)
但是,const isAuthed 在运行时在 checkAuth() 函数中始终未定义。因此导致 replace("feed") 永远不会运行。我期待它是假的还是真的。
另外,如果我在 checkIfAuthed 函数中使用 const user = firebase.auth().currentUser ,则 Replace 函数会运行,但这需要用户点击登录按钮,而上面的 firebase 观察器会自动运行。
【问题讨论】:
【参考方案1】:你可以在这里查看这个实现
我们读取用户身份验证并将值设置为Redux https://github.com/x-team/unleash/blob/develop/app/services/authService.js时的Service
将用户状态设置为redux状态对象https://github.com/x-team/unleash/blob/develop/app/reducers/userReducer.js的reducer
动作创作者https://github.com/x-team/unleash/blob/develop/app/actions/UserActions.js
登录状态检查 https://github.com/x-team/unleash/blob/develop/app/components/UnleashApp.jsx#L17
最重要的部分是authService,有任何问题都可以告诉我
【讨论】:
以上是关于Firebase onAuthStateChanged 在 React App 中未按预期运行的主要内容,如果未能解决你的问题,请参考以下文章
firebase.auth().onAuthStateChanged 不工作
如何从 firebase.auth().onAuthStateChanged 中提取数据
.onAuthStateChanged 方法是不是计入 Firebase 身份验证验证?
TypeError: firebase.auth(...).onAuthStateChanged 不是函数