当今前端框架属vue和react最为受欢迎。当咱们须要做一个前端我的项目时，无疑是从这二者之间，抉择一个你善于的框架进行开发。当然你也能够十分有共性的抉择其它。不过抉择完之后，就要本人吃本人共性的苦。
咱们习惯性拿这框架去开发PC端，比方企业官网，社交网站，电商网站，后盾管理系统等等。绝大部分时候，咱们在开发一些我的项目比拟大，内容比拟多的我的项目时，牵强附会的，咱们须要有很多页面，并应用路由进行页面跳转。此时，一个新的问题呈现了，如何实现路由鉴权？
首先咱们要搞清楚什么叫路由鉴权。就是在页面进行路由跳转时，对以后用户进行鉴定，有没有权限跳转到指标页面。这种场景其实很常见，一个略微大一点的我的项目，它不可避免的会波及到多用户，不同角色进行应用。甚至就是说，一个后盾管理系统，如果在不登录的状况下，你只能看到寒冷的登录页。因为这个零碎外面的内容太重要也太敏感了。如果不对以后用户进行权限鉴定，任由其查看，太不平安了。
失常状况下，咱们的路由跳转，都是通过申明式导航或编程式导航来实现。如vue中有:
//申明式导航<router-link></router-link>//编程式导航this.$router.pushthis.$router.replacethis.$router.goreact中有:
//申明式导航<nav-link></nav-link>//编程式导航this.history.pushthis.history.replacethis.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就是一句话，本人入手，饥寒交迫。