反应HOC以检查授权用户(受保护的路由)

时间:2018-02-22 05:12:45

标签: reactjs react-router-v4 higher-order-components

我正在尝试构建一个用于保护路由的高阶组件。它会检查(通过网络调用,而不是缓存)当前用户,如果没有找到,将重定向到/ login。 / p>

有关如何操作的任何想法?

1 个答案:

答案 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),并根据响应来呈现组件。

希望这有帮助!