React组件实现权限按钮显示和隐藏

简介: React组件实现权限按钮显示和隐藏

在一些管理后台中,经常会编写权限这一块功能模块,通过调用后端返回的接口,匹备权限码来控制显示和隐藏,

按钮权限控制显示和隐藏

  • 需要和后端沟通好,通过给用户分配权限(权限码),通过接口的形式,后端返回权限码存储到redux中。

编辑高级组件

  • role_button:存储到redux的权限码
  • button 按钮级别传的权限码
import React, { Component,Fragment } from 'react'
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom'
import { connect } from 'react-redux'


// 按钮权限校验 根据权限码匹备
const AuthButton = (props) => {
    const { button,role_button,children } = props
    return (
        role_button.includes(button) ? children : null
    )
}



// 校验数据类型
AuthButton.propTypes = {
    button: PropTypes.string,
}
// 默认
AuthButton.defaultProps = {
    button: "",
}


const mapStateToProps = (state) => ({
    role_button: state.app.button
})

export default connect(
    mapStateToProps,
    null
)(withRouter(AuthButton))

如何使用

  • 在需要的组件中引入编写好的这个组件(AuthButton )组件
  • 通过给button传权限吗,可以控制显示和隐藏
<div className="inline-button">
         <AuthButton button="department:edit">
                  <Button type="primary">
                           <Link to={{pathname:'/index/department/add',state:{id:rowData.id}}}>编辑</Link>
                    </Button>
        </AuthButton>
         <AuthButton button="department:delete">
                    <Button onClick={()=>this.delete(rowData.id)}>删除</Button>
       </AuthButton>

  </div>

通过以上代码,控制权限按钮就可以实现显示和隐藏了。

目录
相关文章
|
1月前
|
存储 前端开发 索引
REACT 在组件之间共享状态
REACT 在组件之间共享状态
|
2天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
8天前
|
前端开发 JavaScript 开发者
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
21 2
|
8天前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
22 1
|
8天前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
13 0
|
8天前
|
缓存 前端开发
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
11 0
|
8天前
|
前端开发
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
12 0
|
1月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
2月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
28 3
|
23天前
|
缓存 前端开发 JavaScript
如何对 React 函数式组件进行优化
如何对 React 函数式组件进行优化