距离上一篇文章，似乎已经过去好久了。
确实是最近相对忙了一点，本身是用vue重构之前一个传统的项目，就自己一个人写。而且，在稍微闲暇之余，想着同时用react也重构一遍，也算是对react的学习吧！毕竟只有实际应用才是最好的学习方法。
在vue应用中，我们常常涉及到一个概念就是路由导航守卫。
在做用户登录确认和身份标识时，常常需要进行路由的导航守卫。
当前的项目需求：
用户如果想要使用我们的平台，必须进行登录，用户登录之后，依据用户身份，确认其是车主，还是货主，分别展示不同的应用内容。
所以路由导航守卫的大概是这样的：
在用户输入应用网址之后，先检测是否登录，如果未登录，二次跳转到登录页面，如果已经登录，那么判断用户身份，如果车主，跳转到车主对应的页面，如果是货主，跳转到货主对应的页面。
vue应用中，我们配置完路由之后，统一对路由进行守卫，直接上代码吧！
router.beforeEach((to, from, next) => {
NProgress.start()
let identity = parseInt(localStorage.getItem('identity'), 10)
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
if (identity) {
identity = identity === 2 ? 'shipper' : identity === 1 ? 'carrier' : ''
// console.log('permission:', to.path, to.path.includes(identity))
if (to.path.includes(identity)) {
next()
} else {
next({
name: identity,
replace: true
})
}
} else {
next(`/login?redirect=${ to.path }`)
NProgress.done()
}
}
})
router.afterEach((to, from) => {
if (whiteList.indexOf(to.path) !== -1) {
store.dispatch('fedLogOut')
let identity = localStorage.getItem('identity')
if (identity) localStorage.setItem('identity', null)
}
// finish progress bar
NProgress.done()
})
在router.beforeEach中，第一个if判断的是，如果当前用户直接输入的是类似于login、registe这些页面，在直接利用next()跳转到用户输入的页面。
第二个if (identity)判断的是用户是否已经登录了，如果不存在identity，也就是用户未登录，利用next(`/login?redirect=${ to.path }`)跳转到login页面。
第三个if (to.path.includes(identity))判断的是用户输入的网址和其身份标识是否匹配，如果是车主，输入的网址是属于货主的，就重定向到车主所属页面。
这一整个流程下来，就完成了路由的导航守卫。
然而，当使用react进行重构的时候，发现一个尴尬的事情，react应用中，react-router4似乎并没有提供上述类似的api供我们进行路由守卫，然而路由的导航守卫又必须要做，总不至于刚刚开始项目就这么夭折吧！这其中寻找react-router4的导航守卫过程，就不细说了，说多了都是泪啊。只说结果：react-router4就是以组件的方式提供的导航，他所有的类似于<Route/> <Link/>等等，都是组件。然后，想到什么了？
来吧！
当然：（路由怎么配置就不说了）与之前一样，类似于login、register的页面不需要任何守卫，直接进入就好了。需要守卫的是当用户进入车主和货主的页面时。
上代码吧！
const { isLogined, identity } = this.state
return isLogined ?
(identity === 2 ?
(<Spin spinning={this.props.loading}><Layout>
<Header className="header">
<div className="enterprise">南京星通北斗哦</div>
<Navbar />
<UserInfo className="userinfo" />
</Header>
<Content className="container">
<Switch>
{
Shippers.map(route => {
return <Route path={"/shipper/" + route.path} component={route.component} key={route.path} />
})
}
<Route path={"/" || "/shipper/*"} render={() => (
<Redirect to="/shipper/home" />
)} />
</Switch>
</Content>
</Layout></Spin>) :
<Redirect to="/carrier" />) :
<Redirect to="/login" />
看出什么了？两个关键词：isLogined、identity（代码并不全，主要说的是思路，请勿直接使用）。
isLogined判断的是是否登录，如果未登陆，<Redirect to="/login" />
identity === 2判断的是当前是否为货主，如果不是，<Redirect to="/carrier" />
只有这两个判断都满足了，才能展示当前货主所属的组件，是不是完成了所谓的路由导航守卫？
需要改变的是一个思想：react-router4当中，他就是组件，不满足条件的话，直接Redirect，这就是所谓的导航守卫。思想转变过来了，其实要做react-router4似乎比vue-router的导航守卫更简单一点呢！