React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)

本示例

React使用JavaScript编写

Vue使用TypeScript编写

一、React 

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

高阶组件示例(传入一个React组件,返回一个新的React组件):

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第1张图片

高阶组件分解步骤

//普通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)了 所以这段代码未经测验

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第2张图片

实际使用的时候

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第3张图片

umi项目示例(以下页面经过测试)

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第4张图片

无权页面组件

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第5张图片

umi添加路由位置

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第6张图片

运行效果

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第7张图片

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第8张图片

2、按钮级权限

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

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

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第9张图片

进行调用

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第10张图片

运行效果

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第11张图片React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第12张图片

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第13张图片

二、VUE

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

1、路由权限

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

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第14张图片

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

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第15张图片

403无权页面

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第16张图片

运行效果

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第17张图片

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第18张图片

2、按钮级权限

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

指令示例代码

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第19张图片

页面示例代码

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第20张图片

运行结果

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第21张图片

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第22张图片

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第23张图片

插槽方式实现

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第24张图片

注册为全局组件

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第25张图片

调用示例

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第26张图片

运行结果

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第27张图片

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第28张图片

React、Vue 后台管理系统权限控制示例(React高阶组件,Vue指令,插槽)_第29张图片

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

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

你可能感兴趣的:(权限控制)