Question

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

我的初始状态如下所示：

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

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

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} />
)

在页面呈现之前未设置认证状态支持

1 个答案: