创建 "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>
所以我有一个使用 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>