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' />
