react-router v4校验登录

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

核心食材

1.    v4推出的 组件

2.    HOC(verify)

3.    react-router-dom

菜谱

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

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
               }
               return
          }
    }
}

1.  参数 Comp

2.  登录 return

3.  未登录 return

总结:主要是结合高阶函数(组件)思想和 v4 的 

你可能感兴趣的:(react-router v4校验登录)