创建“门控”反应组件答案

【问题标题】：creating "gated" react components创建“门控”反应组件
【发布时间】：2016-12-09 10:26:43
【问题描述】：

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

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

在 react 中处理此类问题的最佳方法是什么？

【问题讨论】：

标签： reactjs admin refluxjs

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

【讨论】：

不错！因此，验证父组件将负责根据令牌的状态是否显示子组件，如果服务器以“未授权”响应，则父组件可以决定从那里做什么（例如重定向到登录组件route) 都没有挂载子组件。