关于前端: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 就是一句话，本人入手，饥寒交迫。