全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

React的遮羞布

发布时间:2022-09-08 13:34:49
发布人:wjy

  当今前端框架属vue和react最为受欢迎。当我们需要做一个前端项目时,无疑是从这二者之间,选择一个你擅长的框架进行开发。当然你也可以非常有个性的选择其它。不过选择完之后,就要自己吃自己个性的苦。

  我们习惯性拿这框架去开发PC端,比如企业官网,社交网站,电商网站,后台管理系统等等。绝大部分时候,我们在开发一些项目比较大,内容比较多的项目时,顺理成章的,我们需要有很多页面,并使用路由进行页面跳转。此时,一个新的问题出现了,如何实现路由鉴权?

  首先我们要搞清楚什么叫路由鉴权。就是在页面进行路由跳转时,对当前用户进行鉴定,有没有权限跳转到目标页面。这种场景其实很常见,一个稍微大一点的项目,它不可避免的会涉及到多用户,不同角色进行使用。甚至就是说,一个后台管理系统,如果在不登录的情况下,你只能看到冰冷的登录页。因为这个系统里面的内容太重要也太敏感了。如果不对当前用户进行权限鉴定,任由其查看,太不安全了。

  正常情况下,我们的路由跳转,都是通过声明式导航或编程式导航来实现。如vue中有:

React的遮羞布1

  react中有:

React的遮羞布2

  我们在使用这些路由的api时,基本上就可以实现各种业务需要的页面跳转。正常情况下,用户在使用时,遵循我们定义好的路由规则,也不会有什么问题。

  但是,这世间就是这么奇妙,总有一些非正常情况,让我们意想不到。如果张三是一个企业小职员,他在管理系统中的权限是只能看到A页面不能看到B页面,而李四是他的上级领导,可以看A和B两个页面。有一天,张三跑到李四办公桌前,和领导谈一些事情,无意中看到了李四电脑上的B页面的内容,并被迫记下了B页面的路由地址。回到工位上后,脑海里一直回忆着刚才看到的B页面,内心久久不能平静,原来咱们这个系统里,还有这么精彩的内容啊!于是张三灵光一闪,抬起颤抖的双手,在浏览器地址栏中输入B页面的路由,啪一声回车,新世界的大门打开了。

  如果这个问题不解决,这个场景不考虑,那就是我们开发者的不专业。用户可以没有这种场景,但我们不能不解决这种问题。可以不用,但不能没有。作为开发者,我们希望,无论用户是正常操作,还是非正常操作,不该跳转的就不能跳转,不该他看的,我们就是要加上一层遮羞布。

  目标有了,如何去实现呢?对于vue来说,其实方案有很多,我们举其中一例说明即可。

  在vue中,有个非常好用的东西叫路由守卫,也有人称导航守卫。这个守卫分三类有七个,并可指定一个回调函数。能在每一次页面跳转时,触发这个回调函数执行,所以我们上述的目标就可以借助这个守卫来实现。其实vue的路由中还有一个叫元信息的东西。就是在路由规则中添加一个叫meta的属性。我们可以给这个meta赋值一个对象,对象中放一个属性叫login,如下:

  这个元信息,在路由守卫中,也是可以拿到的。那么此时,我们可以在路由守卫中去做判断,如果当前要跳转的目标页,它的路由规则中的login为true值,我们就认为这个目标页面需要路由鉴权。如果你把当前登录用户的信息放在了vuex中或其它什么地方,你就可以去获取它了,获取后进行判断当前用户是否登录,并且有无权限访问目标页面。符合条件就放行,不符合条件就挡回去。这就是vue的遮羞布,无论用户是正常操作,还是非正常输入url跳转,路由守卫都能拦截,进行鉴权。

  那么react呢?尤其是react-router-dom@5版本,它没有像vue这样的路由守卫供我们使用,也没有像路由元信息这样的东西让我们去辨别是否需要鉴权。但是这个问题又是很常见必须要解决,所以我们得自己想办法了。

  其实玩react的人都知道,react比vue更接近原生,没有那么高度的封装。这就意味着,在框架没有给我们提供可用功能的情况下,我们就需要自己去实现。

  没有路由守卫和元信息,我们就直接在页面中的componentDidMount声明周期函数中写逻辑,或者函数式组件中,用useEffect加上空依赖模拟该生命周期函数。在函数中,我们可以获取当前登录用户,假设你将登录用户保存在redux中或者其它地方,现在可以去获取它了。获取后,进行判断,如果当前用户没有登录,或者当前用户没有权限访问该页面,那么我们仍然可以用编程式导航将页面路由回退,并提示用户无权限访问。这就是react的遮羞布。

  当然,如果你有很多页面都需要鉴权。或者说对于一个管理系统,应该绝大部分页面都需要这样的路由鉴权。此时如果我们像上述这种方法区实现,那么就需要编写大量的代码到每个页面,工作量大,代码冗余,且不易维护。我们就可以想到,去模拟vue路由那样,将鉴权的代码封装到一个js文件中,在这个js文件中写出所有需要鉴权的页面路由地址,我们称之为鉴权列表,并导出模块。在需要鉴权的页面进行引入,通过获取当前页面路由地址,与鉴权列表中的路由地址进行比对,匹配上后进行鉴权。或者封装成高阶组件,直接套在原页面外面等等。

  只要思想不滑坡,办法总比困难多。其实这个问题也是当前react求职者在面试时被问的频次较高的一个问题。乍一问可能脑子一片空白,但是坐下来细心想想,并没有那么难,如果你有react的工作经验,稍微花几分钟时间,方案就出来了。总之react就是一句话,自己动手,丰衣足食。

相关文章

什么项目适合使用Scrum?

什么项目适合使用Scrum?

2023-10-14
scrum敏捷软件开发是什么?

scrum敏捷软件开发是什么?

2023-10-14
敏捷BI和传统BI有什么区别?

敏捷BI和传统BI有什么区别?

2023-10-14
敏捷开发实行中各岗位职能是什么?

敏捷开发实行中各岗位职能是什么?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取