页面渲染前未设置身份验证状态道具答案

【问题标题】：Authentication state prop not set before page rendering页面渲染前未设置身份验证状态道具
【发布时间】：2018-01-06 01:11:48
【问题描述】：

我在我的简单反应项目中使用 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？

【问题讨论】：

标签： reactjs firebase-authentication react-redux react-router-dom

【解决方案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} />
)

【讨论】：

感谢@grgmo。实际上我现在根本没有使用加载，因为我没有获取任何数据。我想知道是否有办法阻止渲染，直到所有道具都完成加载？在这种情况下，我可以在加载道具时显示微调器。