我正在尝试构建一个用于保护路由的高阶组件。它会检查(通过网络调用,而不是缓存)当前用户,如果没有找到,将重定向到/ login。 / p>
有关如何操作的任何想法?
答案 0 :(得分:1)
首先了解React HOC的工作原理。我将尝试使用伪代码来回答这个问题。
HOC.jsx
export default (Component) => class HOC extends React.Component {
constructor(){
super()
this.state = {
waiting: true,
}
}
componentDidMount() {
this.props.actions.validateUser() // your network call to validate user
.then(() => {
// do your stuff
this.setState({
waiting: false,
})
})
.catch(() => {
// handle redirect using react-router
})
}
render() {
if(this.state.waiting) {
// Add a loader here
return <h1>Loading...</h1>
}
return <Component {...this.props} />
}
}
<强> Component.jsx 强>
import HOC from './HOC.jsx'
class Comp extends React.Component {
render() {
return <h1>I'm a valid user</h1>
}
}
export default HOC(Comp)
当任何组件使用HOC时,网络调用将在mount上执行(也可以移动到componentWillMount
),并根据响应来呈现组件。
希望这有帮助!