距离上一篇文章,似乎已经过去好久了。

  确实是最近相对忙了一点,本身是用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的导航守卫更简单一点呢!

在react项目当中做导航守卫的更多相关文章

  1. 在react项目当中使用redux

    如果需要在你的react项目当中使用状态管理模式的话,需要引入redux和react-redux两个插件,redux提供基本的功能,react-redux提供将redux注入react的方法. imp ...

  2. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  3. vue-router导航守卫(router.beforeEach())的使用

    好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等 ...

  4. VueJs(12)---vue-router(导航守卫,路由元信息)

    vue-router(导航守卫,路由元信息) 之前泄露两篇有关vue-router博客: VueJs(10)---vue-router(进阶1) VueJs(11)---vue-router(进阶2) ...

  5. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  6. vue-router导航守卫,限制页面访问权限

    在项目开发过程中,经常会需要登录.注册.忘记密码等,也有很多页面是需要登录后才能访问,有些页面是无需登录就可以访问的,那么vue是怎么来限制这些访问权限问题的呢? vue-router导航守卫的bef ...

  7. react项目开发中遇到的问题

    前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...

  8. Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫

    一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...

  9. vue-cookies、极验滑动验证geetest、vue-router的导航守卫

    一 . vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/ ...

随机推荐

  1. airflow自动生成dag

    def auto_create_dag(): dag_list=[] dag = DAG() dag_list.append(dag) return dag_list dags = auto_crea ...

  2. SSM整合(自己收藏)

    https://github.com/crossoverJie/SSM/blob/master/README-ZH.md

  3. 将蓝牙rssi(信号强度)转换成距离

    遇到一个问题,是将蓝牙rssi(信号强度)转换成距离的问题. 这一问题没有准确的解决办法,但是有人做过一个拟合回归函数,其变化规律比较类似于rssi的变化规律,函数如下: d = ^(abs(rssi ...

  4. 发布机制-灰度发布-例子:Gmail Labs

    ylbtech-发布机制-灰度发布-例子:Gmail Labs Gmail Labs是一个新特性橱窗,用户可以自己选择一些未正式发布的新特性进行体验,不喜欢可以关闭,在这个过程中,吃了螃蟹,也当了Go ...

  5. rally task配置文件

    rally task配置文件 Rally本身提供了一些task配置文件,用于提供测试用例中所需的信息包括场景测试中所传入的参数.运行方式是并行还是串行,context等信息.Rally本身提供的tas ...

  6. Selenium 2自动化测试实战32(Fixtures)

    Fixtures fixtures可以形象地把它看作是夹心饼干外层的两片饼干,这两片饼干就是setUp/tearDown,中间的心就是测试用例.除此之外,unittest还提供了更大范围的fixtur ...

  7. 归纳整理Python中的控制流语句的知识点

    归纳整理Python中的控制流语句的知识点 Python 解释器在其最简单的级别,以类似的方式操作,即从程序的顶端开始,然后一行一行地顺序执行程序语句.例如,清单 1 展示了几个简单的语句.当把它们键 ...

  8. Spring Cloud(4):断路器(Hystrix)

    Hystrix介绍 相对于单一系统,分布式系统更容易遇到故障,所以我们一般通过构建冗余,使用集群和负载均衡来保证系统的弹性和高可用.当然,这种方式只解决了一部分问题,当服务崩溃时,我们很容易检测到,因 ...

  9. vue中如何使用event对象

    原文地址 一.event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库.框架多少都有针对 event 对象的处理. ...

  10. 20190603 - CentOS 7 提示 Failed to load SELinux policy. Freezing 导致卡住不启动的解决办法

    现象 最近 Windows 和两台 Mac 混用,将 Windows VirtualBox 中安装的 CentOS 7 拷贝到 Mac 上. 启动 CentOS 7 时,图形界面进度卡在最后,按 Es ...