React中如何实现基于路由的权限控制机制？

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

前言：上一篇文章中提到，同学生提到路由权限控制，由于时间关系没有详细阐述。本文将针对这一特性，对Vue和React进行专业说明，希望同学们看了之后能有所收获，对项目有所帮助。

本文借鉴了以下内容：

前言

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

背景

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

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

一、vue之beforeEach路由鉴权

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