react中路由鉴权

此鉴权使用react-router4之前版本,之后版本请看我最后写的一篇文章
https://blog.csdn.net/qzf_hainenggaima/article/details/103525747


vue.js中有丰富的钩子函数,比如全局前置守卫router.beforeEach,里面做一些判断,权限等。
react中的路由鉴权网上有很多大佬分享的丰富的资源,但是在这里我说下我在项目中用到的简单的方式

Route 可以定义 onEnter 和 onLeave 两个 hook ,这些hook会在页面跳转确认时触发一次。这些 hook 对于一些情况非常的有用,例如权限验证或者在路由跳转前将一些数据持久化保存起来。
在路由跳转过程中,onLeave hook 会在所有将离开的路由中触发,从最下层的子路由开始直到最外层父路由结束。然后onEnter hook会从最外层的父路由开始直到最下层子路由结束。

所以我们可以在最外层的route上面添加onEnter钩子实现权限验证。

<Route path="/" getComponent={app} onEnter={isLogin}>

你可能感兴趣的:(react.js)