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

最新推荐文章于 2024-07-09 15:10:07 发布

Aug丶Sunrise

最新推荐文章于 2024-07-09 15:10:07 发布

阅读量1.2k

点赞数

分类专栏：权限控制文章标签： vue react

本文链接：https://blog.csdn.net/weixin_41888177/article/details/104406399

版权

本示例

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(prop