react-router v4校验登录

react-router v2 中有onEnter 钩子函数，校验登录逻辑在这里写最为合适不过了；时过境迁，v4版本迎来了api大改，onEnter没有了；参考了网络上一些大牛的奇技淫巧，再结合自身项目的现有业务；下面👇 是这道菜的做法，欢迎各位大佬来品尝：

核心食材

1.    v4推出的 <Redirect /> 组件

2.    HOC(verify)

3.    react-router-dom

菜谱

react-router 的Route Router 组件，这里就不阐述了，可以查下官网的用法；那里说的比我好多了；核心做法是Route的component 传入一个verify(Comp)   

即<Route component={verify(Comp)}></Route>

HOC

const verify = (Comp) => {
    return class realComp extends React.Component {
          constructor(props) {
                super(props)
                this.state = {
                      isLogin: 初始化,
                }
           }
          render() {
              if （this.state.isLogin === '初始化'） {
                   return null
              } else if (未登陆) {
                   return <Redirect to='/login' />
               }
               return <Comp {...this.props} />
          }
    }
}

1.  参数 Comp

2.  登录 return <Comp />

3.  未登录 return <Redirect to='/login' />

总结：主要是结合高阶函数（组件）思想和 v4 的<Redirect />