React、Vue 后台管理系统权限控制示例（React高阶组件，Vue指令，插槽）

本示例

React使用JavaScript编写

Vue使用TypeScript编写

一、React 

React 在按钮级权限控制方面基本依靠React高阶组件，页面级（权限路由）不需要

高阶组件示例（传入一个React组件，返回一个新的React组件）：

高阶组件分解步骤

//普通React有状态组件
class NewComponent extends React.Component{
		
}

//普通javaScript方法，但返回值是一个React有状态组件
const Wrap = function(OriginComponent){
    return class NewComponent extends React.Component{
    
    }
}

//箭头函数简写
const Wrap = OriginComponent => class NewComponent extends React.Component{
    
}

//普通React无状态组件
function NewComponent(props){
    
}

//普通javaScript方法，但返回值是一个React无状态组件
const Wrap = function(OriginComponent){
    return function NewComponent(props){
    
    }
}

//箭头函数简写
const Wrap = OriginComponent => function NewComponent(props){
    
}

//箭头函数再简写
const Wrap = OriginComponent => (props) => {
    
}

1、权限路由（页面级）

权限路由多用于防止无权限的用户非法进入系统，拦截并跳转403无权页面

权限路由不需要高阶组件是因为不用返回新组件，而是直接跳转新页面

普通React项目示例(create-react-app)

博主很久没用过create-react-app（使用React-Router）了 所以这段代码未经测验

实际使用的时候

umi项目示例（以下页面经过测试）

无权页面组件

umi添加路由位置

运行效果

2、按钮级权限

React按钮级权限需要依靠高阶组件方便统一管理

示例代码(高阶组件文章开头有介绍和示例写法)

进行调用

运行效果

二、VUE

VUE整体上来说相对于React更好理解

1、路由权限

vue的路由权限可以在路由文件中进行字段配置，在路由循环中进行控制

然后再main.ts中拦截路由进行判断

403无权页面

运行效果

2、按钮级权限

vue按钮级权限使用vue指令实现，当然，还有插槽方式的实现，指令相比其他方法更容易理解

指令示例代码

页面示例代码

运行结果

插槽方式实现

注册为全局组件

调用示例

运行结果

至此  React和Vue的权限控制已经介绍完毕 

写得有些潦草，代码如有错误请留言  有不对的地方请指正，谢谢