在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函数:

  1. ...
  2. router.beforeEach(async(to, from, next) => {
  3. const toPath = to.path;
  4. const fromPath = from.path;
  5. })
  6. ...

在之前的版本中,React Router 也提供了类似的 onEnter 钩子,但在 React Router 4.0 版本中,取消了这个方法。React Router 4.0 采用了声明式的组件,路由即组件,要实现路由守卫功能,就得我们自己去写了。
如果不使用路由守卫,Router 组件是这样子的:

  1. import * as React from 'react';
  2. import { HashRouter,Switch,Route,Redirect } from 'react-router-dom';
  3. import { HomePage } from '../pages/home/home.page';
  4. import { LoginPage } from '../pages/login/login.page';
  5. import { ErrorPage } from '../pages/error/error.page';
  6. export const Router = () => (
  7. <HashRouter>
  8. <Switch>
  9. <Route path="/" exact component={HomePage}/>
  10. <Route path="/login" exact component={LoginPage}/>
  11. <Route path="/home" exact component={HomePage}/>
  12. <Route path="/404" exact component={ErrorPage}/>
  13. <Redirect to="/404" />
  14. </Switch>
  15. </HashRouter>
  16. );

上面的 Router 组件,包含了三个页面:

  • 登陆
  • 主页
  • 404 页面

以及四个路由:

  • 根路由
  • 登陆路由
  • 主页路由
  • 404 路由

其中,根路由和 /home 路由,都定向到了主页路由。
以上是一个基本的路由定义,可以在登陆/主页和 404 页面之间来回跳转,但也有一些问题:

  • 非登陆状态下,可以直接跳转到主页
  • 登陆状态下,也可以输入 /login 路由跳转到登录页

现在,我们想完成这样的功能:

  • 非登陆状态下,无法直接跳转到主页,如果在非登陆状态下进行主页跳转,需要重定向至登陆路由
  • 登陆状态下,无法跳转至登录页,如果在登陆状态下进行登陆页跳转,需要重定向至主页路由

要完成这个功能,有两种方案:

  • 在每个组件中,根据 props 上的 history 对象来进行跳转
  • 进行全局的路由守卫处理

第一种方式,实现起来比较简单,但有很多的代码量,这里主要介绍第二种方式。
在 React Router 4.0 中,没有再像之前的版本那样,提供 onEnter 这样的全局跳转钩子,因此要通过高阶组件的方式去处理。
下面是我的实现方式,首先,准备一份路由表,包含了路由的地址,组件以及是否需要权限校验:

  1. import { HomePage } from '../pages/home/home.page';
  2. import { LoginPage } from '../pages/login/login.page';
  3. import { ErrorPage } from '../pages/error/error.page';
  4. interface routerConfigModel {
  5. path:string,
  6. component?:any,
  7. auth?:boolean
  8. }
  9. export const routerConfig:routerConfigModel[] = [
  10. {
  11. path:'/',
  12. component:HomePage,
  13. auth:true,
  14. },{
  15. path:'/home',
  16. component:HomePage,
  17. auth:true,
  18. },{
  19. path:'/login',
  20. component:LoginPage,
  21. },{
  22. path:'/404',
  23. component:ErrorPage
  24. }
  25. ];

auth 设置为 true,表示该路由需要权限校验。
然后,定义 Router 组件,该组件是经过高阶组件包装后的结果:

  1. import * as React from 'react';
  2. import { HashRouter,Switch } from 'react-router-dom';
  3. import { FrontendAuth } from '../components/frontend-auth/frontend-auth.component'
  4. import { routerConfig } from './router.config'
  5. export class Router extends React.Component{
  6. render(){
  7. return(
  8. <HashRouter>
  9. <Switch>
  10. <FrontendAuth config={routerConfig} />
  11. </Switch>
  12. </HashRouter>
  13. );
  14. }
  15. }

所有的路由跳转,都交给 FrontendAuth 高阶组件代理完成。下面是 FrontendAuth 组件的实现:

  1. import * as React from 'react';
  2. import { Route,Redirect } from 'react-router-dom';
  3. import { propsModel } from './frontend-auth.model'
  4. export class FrontendAuth extends React.Component<any,propsModel>{
  5. render(){
  6. const { location,config } = this.props;
  7. const { pathname } = location;
  8. const isLogin = localStorage.getItem('__config_center_token')
  9. // 如果该路由不用进行权限校验,登录状态下登陆页除外
  10. // 因为登陆后,无法跳转到登陆页
  11. // 这部分代码,是为了在非登陆状态下,访问不需要权限校验的路由
  12. const targetRouterConfig = config.find((v:any) => v.path === pathname);
  13. if(targetRouterConfig && !targetRouterConfig.auth && !isLogin){
  14. const { component } = targetRouterConfig;
  15. return <Route exact path={pathname} component={component} />
  16. }
  17. if(isLogin){
  18. // 如果是登陆状态,想要跳转到登陆,重定向到主页
  19. if(pathname === '/login'){
  20. return <Redirect to='/' />
  21. }else{
  22. // 如果路由合法,就跳转到相应的路由
  23. if(targetRouterConfig){
  24. return <Route path={pathname} component={targetRouterConfig.component} />
  25. }else{
  26. // 如果路由不合法,重定向到 404 页面
  27. return <Redirect to='/404' />
  28. }
  29. }
  30. }else{
  31. // 非登陆状态下,当路由合法时且需要权限校验时,跳转到登陆页面,要求登陆
  32. if(targetRouterConfig && targetRouterConfig.auth){
  33. return <Redirect to='/login' />
  34. }else{
  35. // 非登陆状态下,路由不合法时,重定向至 404
  36. return <Redirect to='/404' />
  37. }
  38. }
  39. }
  40. }

以及对应的 Model:

  1. export interface propsModel {
  2. config:any[],
  3. }

页面上的路由跳转,都由 FrontendAuth 高阶组件代理了,在 Switch 组件内部,不再是 Route 组件,而只有一个 FrontendAuth 组件。
FrontendAuth 组件接收一个名为 configProps,这是一份路由表。同时,由于 FrontendAuth 组件放在了 Switch 组件内部,React Router 还自动为 FrontendAuth 注入了 location 属性,当地址栏的路由发生变化时,就会触发 location 属性对象上的 pathname 属性发生变化,从而触发 FrontendAuth 的更新(调用 render 函数)。
FrontendAuthrender 函数中,根据 pathname 查找到路由表中的相关配置,如果该配置中指定了无需校验,就直接返回相应的 Route 组件。
如果查找到的配置需要进行校验,再根据是否登陆进行处理,具体可以查看代码中的注释。

总结一下,实现路由守卫需要考虑到以下的问题:

  1. 未登录情况下,访问不需要权限校验的合法页面:允许访问
  2. 登陆情况下,访问登陆页面:禁止访问,跳转至主页
  3. 登陆情况下,访问除登陆页以外的合法页面:允许访问
  4. 登陆情况下,访问所有的非法页面:禁止访问,跳转至 404
  5. 未登录情况下,访问需要权限校验的页面:禁止访问,跳转至登陆页
  6. 未登录情况下,访问所有的非法页面:禁止访问,跳转至 404

作者:黑黢黢
链接:https://www.jianshu.com/p/677433245697
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

React Router 4.0 实现路由守卫的更多相关文章

  1. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

  2. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  3. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  4. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  5. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  6. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  7. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  8. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  9. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

随机推荐

  1. yii2.0里自己写的源码上传图片

    在做项目过程中,用了源码表单上传, <form action="?r=pre/create" method="post" enctype="mu ...

  2. Linux:301重定向 —— 将不带www的重定向到带www的

    仓鼠又要手把手教啦 1.先看看自己有没有解析域名(带www和不带www的是两种域名形式!!) 位置:阿里云->域名->解析 2.进入解析,带www的说明你已经解析了www.ljjpm.co ...

  3. dedecms Ajax异步获取文章列表

    dedecms如何通过ajax(异步)动态获取文章列表数据. 第一步添加:服务端(PHP)代码 打开plus目录下面的list.php文件,在12行代码下面添加以下代码: if(isset($_GET ...

  4. FireFox浏览器Flash&视频下载工具推荐

    介绍 两款扩展组件:Flash and Video Download & Flash Video Downloader 一起使用,各有优缺点. Flash and Video Download ...

  5. 我的第一个Python随笔

    自学Python也很长时间了,注册博客园写了第一篇随笔.之前想过很多次,但是始终不知道该怎么开始,内容如何,现在想想,随笔嘛,是自己的想法,也自己的实践,又是自己的锻炼.话不多说,开始今天的正式内容. ...

  6. 中间人攻击之劫持登录会话(cookies)

    关于中间人攻击 中间人攻击(Man-in-the-MiddleAttack,简称"MITM攻击")是一种"间接"的入侵攻击,这种攻击模式是通过各种技术手段将受入 ...

  7. pg 关于不插入重复字段的方法

    首先在表的某列加入唯一约束 alter table language_pms add CONSTRAINT language_pms_unique unique(xml); insert into l ...

  8. 元素设置float属性后,其后面的元素的位置问题

    分两种情况: .content{ width:350px; height:150px; color:#fff; } .content1,.content2{ background-color: #00 ...

  9. create-react-app部署到GitHub Pages时报错:Failed to get remote。origin.url

    最近使用create-react-app脚手架开发了一个私人博客:点击跳转,在部署到GitHub Pages的时候报了一个错误,具体如下: 在create-react-app的GitHub库的issu ...

  10. IDEA 搭建Java WEB 开发环境

    本文是一篇讲解如何在 目前比较流行的IntellJ IDEA 下搭建JavaWEB的说明文档, 如有写的不详细的地方,希望各位留下自己宝贵的意义. Tips : 遇到的问题 , 请耐心看完文章,在文章 ...