创建 "gated" 个 React 组件

Question

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

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

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

Answer 1

你不需要在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>

创建 "gated" 个 React 组件

creating "gated" react components

admin

reactjs

refluxjs