React的遮羞布

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

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

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

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

//声明式导航
<router-link></router-link>
//编程式导航
this.$router.push
this.$router.replace
this.$router.go

react中有:

//声明式导航
<nav-link></nav-link>
//编程式导航
this.history.push
this.history.replace
this.history.go

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

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

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

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

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

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      meta: {login:true}
    }
  ]
})

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

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

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

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

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

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