页面呈现前未设置身份验证状态道具

Question

我在我的简单反应项目中使用 redux，我正在设置受保护的路由，如果用户未登录，它应该触发重定向。

我的初始状态看起来像这样：

const INITIAL_STATE = {
  email: '',
  password: '',
  error: '',
  loading: false,
  loggedIn: false
};

我的组件中的渲染函数如下所示：

if (!loggedIn) {
  return (<Spinner />);
}  

if (loggedIn === false) {

  return (
    <Redirect to={{
      pathname: '/login',
      state: { from: this.props.location }
    }} />
  )
}
return (
  <Route {...this.props} />
)

现在，当用户登录时，一切正常，显示微调器直到内容加载完毕。

当用户未登录时出现问题，然后显示微调器并且没有其他任何反应，基本上不会调用重定向。我可以在控制台中看到状态仅在我运行组件时设置，并且以后根本不会更新，因为我没有调用任何函数。我想知道我是否应该在 componentWillMount() 部分设置一个额外的功能，或者类似的东西？还是我只是在乱搞 undefined 和 false？

Answer 1

你有两个语句检查相同的东西 !loggedIn，它到达第一个语句导致 spinner 因为 return 它没有进一步。

假设 loading 工作正常，你可以试试这个 -

if (!loggedIn) {
  return (
    <Redirect to={{
      pathname: '/login',
      state: { from: this.props.location }
    }} />
  )
}

if (loading) {
  return (<Spinner />);
}

return (
  <Route {...this.props} />
)

页面呈现前未设置身份验证状态道具

Authentication state prop not set before page rendering

reactjs

firebase-authentication

react-redux

react-router-dom