React进阶(五):导航守卫
文章目录
- 一、前言
- 二、全局守卫
- 三、拓展阅读
一、前言
在《React进阶(四):路由介绍》博文中,介绍了React
路由相关知识,在实际项目开发过程中,路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定,故需要导航守卫来完成这一事项。
在实现react-router
路由拦截之前,先看一下vue
路由拦截是如何使用的,都做了哪些事情。
正如其名,vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
二、全局守卫
可以使用 router.beforeEach
注册一个全局前置守卫:
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve
完之前一直处于等待中。
可以看到,vue
在所有的路由跳转前,在beforeEach
中可以监听所有的路由跳转,如果符合规则,就进行跳转,如果不符合,那么就跳转到指定的位置。
react-router
当中,为什么不能提供同样的api
呢?作者在github
中回复到:
You can do this from within your render function. JSX doesn’t need an API for this because it’s more flexible.
大概的意思就是就是:
您可以在渲染功能中执行此操作。JSX不需要API,因为它更灵活。
从作者的回复当中可以看到,他希望react-router
是灵活的,不希望在里面添加太多的api
,这些api
应该是让使用者根据自己的需求去实现路由拦截。下面,就开始实现一个可以满足大部分需求的路由拦截。
react-router
版本:4.0
首先,要使用react-router-config
,用数组的形式去写一个路由配置:
//routerConfig.js
const routes = [{path: '/',component: 'component/app',routes: [{path: '/asd',component: 'component/topics',routes: [{path: '/asd/login',component: 'component/home'}]}]}
]export default routes
用配置的方式写,是因为这样可以很直观的看出来整个项目的路由配置,知道要跳转到什么位置,在什么位置下,会显示什么样的组件。
应该可以看出来,这里面存在两个地方和文档是有区别的:
- 整个数组只有一个列表项,只有这个一个对象。
compoent
的值是字符串,而不是一个对象或者方法。
第一点:因为可能要在当前的页面中,需要一个根路由,在根路由中,可能做一些类似与主题色的设定,全局内容的展示之类的操作,在这里就可以做到了,剩下的,都在他的routes
里面去做就ok了。
第二点:这么做的目的,就是为了实现路由更快的渲染,在正常的使用方式中一般都是这样的:
//伪代码,仅供参考
import A from './a'
{path:'/',component:A
}
基本上是这样实现的,这样实现存在一个问题:如果我们的页面有20个,甚至50个、100个要跳转的路径,怎么办?这样每次加载到router.js
这个文件的时候,是需要把这么多的文件都import
过来,这样是很影响代码的执行效率和页面的渲染速度的。
具体怎么渲染,我们会在下面去一一细分。
由于路由的整体是一个数组(array
),我们要在这里,去做一个循环,如果我们用最笨重的方式去实现。
<Route path='/' component={a} />
<Route path='/b' component={b} />
<Route path='/c' component={c} />
<Route path='/d' component={d} />
...
很明显,这个样子去实现一个路由的跳转是不明智的,我们要写的是一个可维护,易读性强的路由。
所以,这里写了一个用来遍历路由数组的方法。
//renderRoutesMap.js
import RouterGuard from './routerGuard'
const renderRoutesMap = (routes) => (routes.map((route, index) => {return (<Route key={index} path={route.path} render={props => (<RouterGuard {...route} {...props} />)}/>)})
)export default renderRoutesMap
这里把路由的渲染做了一个小小的遍历,把路由对象做了一次遍历,重点来了!
RouterGuard
就是我们的重点,在这里,我们就要做真正的,路由拦截(导航守卫)!
//routerGuard.js
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import Loadable from 'react-loadable'
import { connect } from 'react-redux'
import renderRoutesMap from './renderRoutesMap'const mapStateToProps = state => (state)
const mapDispatchToProps = dispatch => ({ ...dispatch })class RouterGuard extends Component {constructor(props) {super()}componentWillMount() {let { history: { replace }, authorization, location } = this.propsif (authorization) replace('./login')if (location.pathname === '/') replace('./asd')console.log('路由跳转前的拦截', this.props)}render() {let { component, routes = [] } = this.propsconsole.log('准备渲染compoent前', this.props)const LoadableComponent = Loadable({loader: () => import(`../${component}`),loading: () => (<span>11111</span>)})return (<div><LoadableComponent {...this.props} />{renderRoutesMap(routes)}</div>)}
}export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RouterGuard))
componentWillMount
是react
组件当中的生命周期,在渲染前调用,在这里,我们可以拿到redux
当中的参数,也可以拿到通过路由带过来的参数。
在这里,用的是authorization,如果authorization是true,就代表我没有登录,跳转到login登录页。
此外,还做了重定向的操作,比如在根路由的时候,要重定向跳转到另外一个地址。
其实这样就可以实现真正的路由拦截了,但是,这个还不够,我们不只要做拦截,我们还要做的是,除拦截以外,还要尽可能的加快渲染速度,提升用户体验。
这里,我有用到一个react-loadable
路由懒加载的组件,作用就是路由懒加载,加载具有动态导入组件的更高阶组件,提升用户体验。
这里用到的import
是不支持变量的,所以这里用的是模版字符串的方式,在每一次进入组件,并准备render
的时候,才去import
该组件,这样,可以在每一次渲染的时候不用浪费资源,也可以保证首次渲染的速度变快。
最后,把路由配置、路由数组渲染、路由组件渲染给拼接一下,一整个react-router
路由拦截(导航守卫)
//renderRoutes.js
import renderRoutesMap from './renderRoutesMap'
/*** renderRoutes 渲染路由* @param {array} routes 路由列表* @param {object} extraProps = {} extra的属性* @param {object} switchProps = {} switch的属性*/
const renderRoutes = ({ routes, extraProps = {}, switchProps = {} }) => (<Router><Switch {...switchProps}>{renderRoutesMap(routes)}</Switch></Router>
)export default renderRoutes//index.js
const router = () => (renderRoutes({routes: routerConfig})
)
export default router
最后在页面当中,引入index.js
就可以了。
三、拓展阅读
- 《React 系列》
React进阶(五):导航守卫相关推荐
- Vue-router进阶:导航守卫
全局前置守卫 使用router.beforeEach注册一个全局前置守卫. const router = new VueRouter({...}) router.beforeEach((to,from ...
- 导航守卫又称为路由守卫
路由进阶部分 – 导航守卫( 路由守卫 ) 作用: - 类似 [保安] 守卫路由 进 举例: 携带数据进 出 举例: 事情完成才能出 导航守卫一共有三种形式 全局导航守卫用的时候写在主文件中(main ...
- vue-router进阶:路由使用归纳、路由导航守卫、导航守卫解析流程、
一.定义和理解 导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...
- react实现路由跳转拦截功能(导航守卫)
react实现路由跳转拦截功能(导航守卫) 背景 方法1:通过Prompt组件实现react路由跳转拦截功能 Prompt组件介绍 Prompt组件示例 自定义Prompt组件的提示弹窗 方法2:通过 ...
- vue从入门到精通之进阶篇(一)vue-router:导航守卫
vue-router的导航守卫之在导航完成后获取数据 需求:在导航完成之后加载数据.渲染DOM <!DOCTYPE html> <html lang="en"&g ...
- React 导航守卫
路由拦截 在实际项目开发过程中,路由之间的跳转必定涉及权限.用户是否登陆等限定条件的判定,故需要导航守卫来完成这一事项 我把路由配置写在了App.jsx中,也可以写在其他组件中. 上代码: // Ap ...
- 十、vue-router学习笔记——认识路由、vue-router基本使用、vue-router嵌套路由、vue-router参数传递、vue-router导航守卫、keep-alive
一.认识路由 1.1 什么是路由? 说起路由你想起了什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. - 维基百科 额, 啥玩意? ...
- react 进阶必学 hook (三):useContext 面馆分店开张了
系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook ( ...
- react 进阶必学 hook (一):useState 来一碗大碗宽面
系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook ( ...
最新文章
- nginx源码分析--内存对齐处理
- Java线程调度yield与join
- [SQL Server优化]善用系统监视器,确定系统瓶颈
- yum(Fedora和RedHat以及SUSE中的Shell前端软件包管理器)命令详解
- leetcode 260. Single Number III | 260. 只出现一次的数字 III(位运算:分组异或)
- 最浅显易懂的 SAPGUI 里 ABAP 调试器的使用方法介绍
- C++异常处理机制详解
- 牛顿插值--python实现
- 取多补少C语言,leetcode题目: 数字的补数 的C语言解法
- Uva(10305)
- [算法]机器人运动范围
- Eclipse代码自动生成
- 时间选择器Android-PickerView的使用
- ubuntu18.04 安装 腾讯qq
- 大作手操作体系:突破后回调不下箱体可加仓,但是也有失误的时候!
- WPF开发之解决程序调用自定义dll库在部分win7电脑上无法运行的情况
- 【DZX修改】根据性别不同显示不同的默认头像
- laravel框架生產vender文件夹
- Kafka: Consumer
- JAVA计算平方,幂运算,三角函数等
热门文章
- TimeUnit使用
- pdf转换html语言,怎样把pdf转换成html?
- 计算机应用程序的安装方法,应用程序无法正常启动,手把手教你应用程序无法正常启动的解决方法...
- SpringData
- 广讯通服务器修复,广讯通改服务器地址
- Leetcode 875.爱吃香蕉的珂珂(Koko Eating Bananas)
- Flipper TR膜张力传感器研究方案
- 低功耗LoRa模块E22-400T22S各工作模式下的电流值实测
- 快捷餐饮之店家后台菜品分类及菜品管理实现
- 变频电机转矩频率特性曲线_电机转矩与变频器的关系以及变频调速时的机械特性分析...