创建 "gated" 个 React 组件

creating "gated" react components

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

但我 运行 陷入了 React 最佳实践的难题。 react 说 ajax (或者在这种情况下是 API 调用)应该在 componentDidMount 而不是 componentWillMount 中完成,但是根据我对 react 生命周期的理解,如果我遵循他们的最佳实践是组件 would/could 在用户通过身份验证之前呈现,这是非常不可取的,尤其是在服务器延迟不够快的情况下。

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

你不需要在token被批准后对你想要显示的确切组件发出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>