react-router v2 中有onEnter 鉤子函數(shù)，校驗登錄邏輯在這里寫最為合適不過了；時過境遷，v4版本迎來了api大改，onEnter沒有了；參考了網(wǎng)絡(luò)上一些大牛的奇技淫巧，再結(jié)合自身項目的現(xiàn)有業(yè)務(wù)；下面?? 是這道菜的做法，歡迎各位大佬來品嘗：
核心食材
1.????v4推出的 <Redirect /> 組件
2.? ? HOC(verify)
3.? ? react-router-dom
菜譜
react-router 的Route Router 組件，這里就不闡述了，可以查下官網(wǎng)的用法；那里說的比我好多了；核心做法是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.? 參數(shù) Comp
2.? 登錄 return <Comp />
3.? 未登錄 return <Redirect to='/login' />
