如何实现React路由的复杂多级鉴权功能？

本文共计12788个文字，预计阅读时间需要52分钟。

前言：在上一篇文章中，同学提到了路由权限鉴权，但未涉及时间关系。本文将针对这一特性，对Vue和React进行专业说明，希望能帮助读者深入理解，并为你的项目提供帮助。

本文将深入探讨Vue和React在路由权限鉴权方面的特点，帮助读者更好地掌握这两个框架。希望同学们阅读后能有所收获。

前言

上一篇文章中有同学提到路由鉴权，由于时间关系没有写，本文将针对这一特性对 vue 和 react 做专门说明，希望同学看了以后能够受益匪浅，对你的项目能够有所帮助，本文借鉴了很多大佬的文章篇幅也是比较长的。

背景

单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面。虽然服务端做了进行接口的权限，但是每一个路由加载的时候都要去请求这个接口太浪费了。有时候是通过SESSIONID来校验登陆权限的。

在正式开始 react 路由鉴权之前我们先看一下vue的路由鉴权是如何工作的：

一、vue之beforeEach路由鉴权

一般我们会相应的把路由表角色菜单配置在后端，当用户未通过页面菜单，直接从地址栏访问非权限范围内的url时，拦截用户访问并重定向到首页。