在react项目当中做导航守卫
距离上一篇文章,似乎已经过去好久了。
确实是最近相对忙了一点,本身是用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项目当中做导航守卫的更多相关文章
- 在react项目当中使用redux
如果需要在你的react项目当中使用状态管理模式的话,需要引入redux和react-redux两个插件,redux提供基本的功能,react-redux提供将redux注入react的方法. imp ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- vue-router导航守卫(router.beforeEach())的使用
好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等 ...
- VueJs(12)---vue-router(导航守卫,路由元信息)
vue-router(导航守卫,路由元信息) 之前泄露两篇有关vue-router博客: VueJs(10)---vue-router(进阶1) VueJs(11)---vue-router(进阶2) ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue-router导航守卫,限制页面访问权限
在项目开发过程中,经常会需要登录.注册.忘记密码等,也有很多页面是需要登录后才能访问,有些页面是无需登录就可以访问的,那么vue是怎么来限制这些访问权限问题的呢? vue-router导航守卫的bef ...
- react项目开发中遇到的问题
前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...
- Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一 . vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/ ...
随机推荐
- IDEA如何切换到括号外
一般我们输入完括号后都会习惯性Enter或者Shift + Enter切换到括号外,结果却变成了: public void nothing() Enter → public void nothing( ...
- typescript简单的应用
简单来说typescript就是新增一下方法,以及增加类型判断 一.普通的类型判断 1.布尔类型(boolean) let isDone: boolean = false let createdByB ...
- Android网络编程之——文件断点下载
一:关于断点下载所涉及到的知识点 1.对SQLite的增删改查(主要用来保存当前任务的一些信息) 2.HttpURLConnection的请求配置 HttpURLConnection connecti ...
- mybatis多对多映射【学生与课程】
1)如图 2)创建students.sql和courses.sql和middles.sql drop table middles; drop table students; drop table co ...
- Flask中的请求上下文和应用上下文
在Flask中处理请求时,应用会生成一个“请求上下文”对象.整个请求的处理过程,都会在这个上下文对象中进行.这保证了请求的处理过程不被干扰.处理请求的具体代码如下: def wsgi_app(self ...
- 分布式存储ceph部署(2)
一.部署准备: 准备5台机器(linux系统为centos7.6版本),当然也可以至少3台机器并充当部署节点和客户端,可以与ceph节点共用: 1台部署节点(配一块硬盘,运行ceph-depo ...
- 在SuSE安装wifidog认证服务器和网关
在SuSE安装认证服务器和网关 在openSuSE 10.3安装wifidog 认证服务器和网关在同台设备中安装完毕.以下是openSuSE的详细安装指南.这个安装是非常初级的,所以请验证或更正. - ...
- CentOS7或CentOS8 安装VirtualBox Guest Addon缺少kernel-headers的解决办法
CentOS7或CentOS8 在Oracle VM VirtualBox中安装Guest Addon时,如果缺少kernel-headers和相应的编译库,会提示出错. "kernel h ...
- NFS PersistentVolume
一.部署nfs服务端: k8s-master 节点上搭建了 NFS 服务器 (1)安装nfs服务: yum install -y nfs-utils rpcbind vim /etc/exports ...
- SpringBoot + Swagger2 自动生成API接口文档
spring-boot作为当前最为流行的Java web开发脚手架,相信越来越多的开发者会使用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于移动端 ...