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 不是函数

在哪里放置 firebase.auth().onAuthStateChanged()

使用 useEffect 与 onAuthStateChanged 检测 Firebase 用户更改 - 有啥区别?