Question

所以我有一个使用Reflux路由器的应用，我想在应用中创建仅限管理员的区域。我想要实现的是当用户进入应用程序的门控部分时，应用程序的一部分将进行API调用以检查用户是否有权访问该组件（通过在服务器上读取的令牌）如果它们未经授权，则会将它们重定向到登录组件。

但是我遇到了一个难题，其中包含了反应中的最佳实践。 react说ajax（或者在这种情况下是一个API调用）应该在componentDidMount而不是componentWillMount中完成，但是如果我按照他们的最佳实践那么从我对反应生命周期的理解那么组件会/可以在用户通过身份验证之前呈现，这是非常不受欢迎的，尤其是在服务器延迟不够快的情况下。

在反应中处理这类事情的最佳方法是什么？

Answer 1

在令牌获得批准后，您不需要在要显示的确切组件上发出ajax请求，它可以是任何组件，例如包装私人信息的组件。

class AuthWrapper extends Component {
  componentDidMount() {
    ajax(url).then(token => {
      if (token) this.setState({ token })
      else redirect()
    })
  }

  render() {
    return (
      <div>
        {this.state.token && this.props.children}
        {!this.state.token && <div>Fetching...</div>}
      </div>
    )
  }
}

然后在其他地方：

<AuthWrapper>
  <YourPrivateComponent />
<AuthWrapper>

创建“门控”反应组件

1 个答案: