react学习之路二：路由守卫-判断登录状态

以下内容全部是vue转react学习过程中的笔记，难免有错误，仅供参考

一、vue的路由守卫

vue-router提供了内置的API router.beforeEach()
在这个方法里面，我们可以判断登录状态来拦截路由的跳转

二、react-router-dom V5版本没有内置API

（其它版本未知）
路由守卫的最终目的是对路由对应组件的渲染进行拦截，所以只需要在render路由组件的地方，先判断登录条件，然后return不同的Route就达到目的了

//App.js
...
const routers = [
  { path: '/', component: Home},
  { path: '/aaa', component: AAA },
  { path: '/bbb', component: BBB}
]
...

<BrowserRouter>
  ...
    <Switch>
      <MyBeforeEach routers={routers} />
    </Switch>
  ...
</BrowserRouter>

//MyBeforeEach.js
...
render() {
  const { routers, location } = this.props
  const { pathname } = location
  const targetRouter = routers.find(item => item.path === pathname)
  const hasToken = localStorage.getItem('token')
  if (hasToken) {
     return <Route path={pathname} component={targetRouter.component} />
  } else {
     return <Redirect to="/login" />
  }
}