控制权限按钮的显示隐藏

最新推荐文章于 2024-05-21 15:44:27 发布
最新推荐文章于 2024-05-21 15:44:27 发布
阅读量1.4k 收藏 3
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39399012/article/details/106090375
版权

权限按钮的显示隐藏

 <template slot="top-right">
            <el-button
                v-if="fn('organizationManage-new')"
                type="primary"
                icon="el-icon-plus"
                :disabled="!hasCurrentNodeData"
                @click="showAddOrg"
            >新增组织</el-button>
            <!-- v-if="$checkBtnAuth('delete', authData, true)" -->
            <el-button
                v-if="fn('organizationManage-delete')"
                :disabled="!selected_rows||selected_rows.length<=0"
                @click="handleClickDelete"
            >删除</el-button>
        </template>

//修改权限显示
  fn(btn) {
    let arr = JSON.parse(sessionStorage.getItem('vuex')).all_has_permission_code
    let flag = arr.indexOf(btn)
    if (flag == -1) {
      return false
    } else {
      return true
    }
  }

控制按钮权限操作

<template>
    <div class="app-container">
        <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addOneRow"
        >新增一行</el-button>
        <el-table
            v-loading="item_menu_permission_loading"
            :data="itemMenuPermissionTable"
            max-height="400px"
            height="400px"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column
                type="index"
                align="center"
                label="ID"
                width="40"
            ></el-table-column>

            <el-table-column
                min-width="140px"
                align="center"
                label="权限名称"
            >
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <div class="edit">
                            <el-input
                                v-model="row.actionName"
                                class="edit-input"
                            />
                            <el-button
                                class="cancel-btn"
                                type="text"
                                icon="el-icon-refresh"
                                @click="cancelEdit(row)"
                            >取消</el-button>
                        </div>
                    </template>
                    <span v-else>{{ row.actionName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                min-width="260px"
                label="权限编码"
            >
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <div class="edit">
                            <el-input
                                v-model.trim="row.actionCode"
                                class="edit-input"
                            />
                            <el-button
                                class="cancel-btn"
                                icon="el-icon-refresh"
                                type="text"
                                @click="cancelEdit(row)"
                            >取消</el-button>
                        </div>
                    </template>
                    <span v-else>{{ row.actionCode }}</span>
                </template>
            </el-table-column>

            <el-table-column
                width="110px"
                label="权限类型"
            >
                <template slot-scope="{row}">
                    <el-select
                        v-model="row.actionOperation"
                        placeholder
                    >
                        <el-option
                            v-for="item in action_operation_options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column
                width="110px"
                label="请求类型"
            >
                <template slot-scope="{row}">
                    <el-select
                        v-model="row.actionType"
                        placeholder
                    >
                        <el-option
                            v-for="item in actionTypeOptions"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                min-width="100px"
                label="请求地址"
            >
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <div class="edit">
                            <el-input
                                v-model.trim="row.actionURL"
                                class="edit-input"
                            />
                            <el-button
                                class="cancel-btn"
                                icon="el-icon-refresh"
                                type="text"
                                @click="cancelEdit(row)"
                            >取消</el-button>
                        </div>
                    </template>
                    <span v-else>{{ row.actionURL }}</span>
                </template>
            </el-table-column>
            <el-table-column
                width="80px"
                label="启用"
            >
                <template slot-scope="{row}">
                    <el-switch
                        v-model="row.ifUse"
                        :active-value="1"
                        :inactive-value="0"
                        @change="singleControlSwitch(row)"
                    ></el-switch>
                </template>
            </el-table-column>

            <el-table-column
                align="center"
                label="操作"
                width="140"
            >
                <template slot-scope="{row,$index}">
                    <el-button
                        v-if="row.edit"
                        type="success"
                        plain
                        @click="confirmEdit(row)"
                    >完成</el-button>
                    <el-button
                        v-else
                        type="primary"
                        plain
                        @click="handleEdit(row)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        @click="handleDelete(row,$index)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

export default class ItemPermissionTable extends Vue {
  filters = {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  }

  listLoading = true
  // 权限类型
  //请求类型
  actionTypeOptions = [
    {
      value: 'GET'
    },
    {
      value: 'POST'
    },
    {
      value: 'PUT'
    },
    {
      value: 'DELETE'
    }
  ]

  @vuexSystemMenu.State current_menu!: IMenuDetail
  @vuexSystemMenu.State item_menu_permission_loading
  @vuexSystemMenu.State action_operation_options
  // 权限列表
  @vuexSystemMenu.State item_menu_permission

  get itemMenuPermissionTable(): IItemMenuPermissionForm[] {
    return this.item_menu_permission
  }

  set itemMenuPermissionTable(val: IItemMenuPermissionForm[]) {
    this.itemMenuPermissionTable = val
  }

  singleControlSwitch({ ifUse, id }) {
    // console.log(ifUse, id, 2)

    getRestart(id, ifUse)
      .then(res => {
        //console.log(res)
        this.$notify.success(`${['禁用', '启用'][ifUse]}成功!`)
      })
      .catch(e => {
        // this.$notify.error(`${['禁用', '启用'][ifUse]}失败: ${e.message}`)
      })
  }

  handleEdit(row) {
    this.$set(row, 'edit', true)
  }

  handleDelete(row, $index) {
    this.$confirm(`确定删除选择的权限？`, { type: 'warning' }).then(() => {
      if (!row.id) {
        this.itemMenuPermissionTable.splice($index, 1)
        return
      }
      deleteMenuPermission([row.id])
        .then(res => {
          this.itemMenuPermissionTable.splice($index, 1)
        })
        .catch(e => {
          this.$notify.error(`删除失败: ${e.message}`)
        })
    })
  }

  addOneRow() {
    this.itemMenuPermissionTable.push({
      menuId: this.current_menu.id,
      actionOperation: 'check',
      actionCode: '',
      actionName: '',
      actionType: 'GET',
      actionURL: '',
      ifUse: 1,
      edit: true
    })
  }

  cancelEdit(row) {
    row.edit = false
    this.$message({
      message: '已取消编辑,将不保存修改!',
      type: 'warning'
    })
  }

  confirmEdit(row) {
    this.$set(row, 'edit', false)
    postMenuPermission(row)
      .then(res => {
        this.$notify.success(`保存成功!`)
      })
      .catch(e => {
        this.$notify.error(`保存失败: ${e.message}`)
      })
  }
}
资深の小白
关注
【Vue项目必备】如何通过权限优雅地控制按钮的显示
weixin_43385047的博客
12-23 807
前端项目中通常会有很多 让不同权限的用户，看到的内容、可实现的操作不同的 需求。 作为优雅的前端工作者，如何避免每次都在代码里重复的写判断的冗余代码？ 第一步 …/utils/auth.js 文件位置 //获取当前客户权限 export function getCurrentAuthority(){ ... return ["admin"] } //校验权限 export function check(authority = []){ //authority：符合什么权限的条件
权限控制流程重点梳理总结
大牛的博客
08-31 902
业务场景 公司里有不同的职能部门，都在用同一套系统 ，不一样部门的人员进入系统里面需要操作的事情是不一样的 必定需要根据不同的员工角色配置不同的权限 RBAC权限设计思想 一种基于角色的设计思想 给员工配置角色 （一个员工可以拥有多个角色） 给角色配置权限点 （一个角色可以有多个权限点） 员工只要有了角色之后，就自动拥有了角色绑定的所有权限点 3. 根据权限设计思想对应业务模块 员工管理(增删查...
directive用户登录权限控制按钮显示与隐藏
lu_qingshan的博客
07-25 489
后台管理项目中有系统权限控制，根据你登录的角色账号，后台给你返回不一样的权限控制，用按钮显示，然后再做操作。 我们登录成功之后把权限保存在session storage里面，用ktBtn命名来存储。 然后在main.js里面写全局指令。 Vue.directive("has", { inserted: function (el, binding) { let prems = JSON.parse(sessionStorage.getItem("ktBtn")) if (prems.ind
WinCC笔记：03.趋势图控件 —— (1) 复选框控制趋势显示和隐藏
qq_42016887的博客
06-19 7737
test1"~"test10"，"pows"，"result"，如下图红框所示。
有权限显示按钮，否则隐藏按钮
iteye_13897的博客
08-05 1274
vue前端按钮显示隐藏_2019-10-25 vue前端按钮权限控制隐藏
weixin_35589827的博客
01-30 2270
vue前端按钮权限控制隐藏权限控制描述如何实现1、储存权限数据2、权限判断方法3、设置vue自定义指令4、最终代码与效果很多后台管理系统会用到权限管理，菜单权限比较好控制，按钮权限就复杂一些，本文介绍的就是按钮权限如何控制，用的是vue项目。权限控制描述前端需要根据后端传来的权限数据控制是否显示新增、编辑、删除(红框所示部分)功能。image.png在这里插入图片描述菜单管理处设置的新增、删除、编...
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
10-16
在实际的应用中，经常需要根据用户的权限动态地显示或隐藏路由，即动态路由。实现动态路由的方法通常包括以下几个步骤： 1. **导航守卫（Navigation Guards）**：Vue Router 提供的导航守卫可以在路由发生变化时...
详解VUE前端按钮权限控制
10-17
如果不存在，则该按钮会被从DOM中移除，达到控制按钮显示与隐藏的目的。 3. **Vue原型方法的定义**：`Vue.prototype.$_has`方法是用于判断当前用户是否具有特定权限的方法。它首先尝试从`sessionStorage`中获取已...
vue与shiro结合实现权限按钮
12-15
Vue的自定义指令（Custom Directives）则提供了扩展Vue行为的能力，我们可以利用自定义指令来绑定特定的权限逻辑，实现按钮的动态显示或隐藏。 在Shiro中，主要通过Subject、Authenticator、Authorizer等核心组件来...
vue项目自定义滚动指令控制按钮显示隐藏
Z.Dragon 的博客
09-05 1973
在vue项目中，有些页面需要toTop的按钮（滚到顶部），因此在页面中需要用到滚动事件，但是如果很多页面都需要用到这个按钮，就要在这些页面中都加上滚动事件，会导致页面代码臃肿，不便维护。 这里使用vue自定义指令封装一个全局的滚动事件，在需要的页面引用组件，加上指令即可。 下面上代码： 1、首先封装一个toTop的按钮组件（默认显示） <template> <div id...
vue根据条件不同显示不同按钮的操作
10-15
主要介绍了vue根据条件不同显示不同按钮的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于门户的前端权限控制
Sunny的博客
12-01 480
关于门户的前端权限控制 前沿：我所理解的门户Portal就是一个入口, 可快速整合应用入口，用来统一账号管理、统一认证登录，打破信息孤岛等，做统一的权限管理，也可以实现单点登录 SSO。早期的MVC时代，web应用其实就有通过权限去控制页面、菜单、按钮等的显示和隐藏，只不过呈现方式不同，大多以php和jsp等为主，随着前后端分离后，前端也成了权限控制的扛把子，主要是从以下这几个角度去实现，路由层面、视图层面以及接口层面 1.路由层面 一般SPA应用结合vue-router和vuex实现完成的一套路由体系，主
el-dropdown-item 怎么设置权限
NancyFyn的博客
05-08 632
当使用插槽来做操作的时候，通常会遇到根据权限去操作相应的按钮。，该getter检查当前用户是否具有访问当前项的权限，如果没有，下拉项将不会被呈现。里面定义的权限，需要调用。
web后台根据权限控制按钮显示/隐藏的方案
weixin_34247032的博客
12-29 3182
2019独角兽企业重金招聘Python工程师标准>>> ...
wincc画面图层的显示和隐藏
yue008的博客
03-09 8725
最近在逛西门子论坛时，发现一个有趣的功能，可以通过脚本对画面的图层进行隐藏和显示，不过该帖子只显示了 简单的脚本代码，本着实践是学习的最好方法。我进行了实际操作，并增加了新的功能。下面是我实际操作的步骤和总结 思路 将整个画面作为对象，然后修改对象的属性方法，实现画面图层的隐藏显示 难点 如何将整个画面作为对象 画面中图层号和脚本中索引值的关系 随机数据的产生 软件配置 条目 描述 软件版本 wincc7.5 SP1 实现步骤 创建项目 打开wincc 7.5 Advance软件
Wincc按钮分角色配置权限与登录
最新发布
m0_37587804的博客
05-21 4340
2、在组态画面中，将两个输入输出域的变量分别设置为'user和'pas'，并在【登录】按钮的【事件-单击鼠标】中添加C脚本。在Wincc上面正确输入账号密码后，点击登录按钮进入不同的角色，在当前角色栏显示已登录角色名称，分别有游客(guest)、操作员(user)和管理员(admin)，未登录时显示未登录。1、根据需求，在用户管理器添加【启动停止】和【绘图导出】两个自定义权限，admin分配两个权限，user仅分配[启动停止]权限，游客不分配权限。管理员权限：所有按钮都可点击操作（启动、停止、绘图、导出）
WinCC 用户权限描述或解释
u012172195的博客
04-23 7096
基本授权概述 编号 1：用户管理 用户可以访问用户管理并进行更改。 编号 2： 区域权限 用户可以在授权的系统区启用画面选择。 编号 3： 系统更改 用户可以触发状态更改（例如结束运行系统）。 编号 4： 监视 用户可以监视但不能控制过程（例如选择批生产可视化）。 编号 5：过程控制 用户可以操作过程。 编号 6： 高级过程控制 用户可以执行对过程产生永久作用的控制操作（...
12. WINCC -- VB实现一键隐藏注释
hello
05-07 355
WINCC -- VBS实现一键隐藏注释
自定义指令下拉菜单隐藏(点击外部指令隐藏)
weixin_45356397的博客
09-07 645
自定义指令下拉菜单隐藏。
前端根据权限控制显示和隐藏
05-27
前端根据权限来控制某些元素的显示和隐藏，通常可以采用以下两种方式： 1. 通过 v-if 或 v-show 控制元素的显示和隐藏 在 Vue.js 中，可以通过 v-if 或 v-show 指令来控制元素的显示和隐藏。v-if 指令可以根据表达式的值来动态添加或移除元素，而 v-show 指令则是根据表达式的值来控制元素的显示和隐藏。 例如，以下代码中的按钮只有在用户具备某个权限时才会显示： ```html <template> <div> <button v-if="hasPermission">操作</button> </div> </template> <script> export default { data() { return { hasPermission: false // 根据用户权限来设置 }; } }; </script> ``` 2. 通过 CSS 样式控制元素的显示和隐藏 通过设置 CSS 样式的 display 属性来控制元素的显示和隐藏，这种方式通常需要在 HTML 元素上添加一个 CSS 类名，并在 CSS 样式中定义该类名的显示或隐藏样式。 例如，以下代码中的按钮只有在用户具备某个权限时才会显示： ```html <template> <div> <button class="btn-permission">操作</button> </div> </template> <style> .btn-permission { display: none; /* 默认隐藏 */ } .has-permission .btn-permission { display: inline-block; /* 具备权限时显示 */ } </style> <script> export default { data() { return { hasPermission: false // 根据用户权限来设置 }; }, computed: { classObject() { return { 'has-permission': this.hasPermission }; } } }; </script> ``` 以上两种方式都可以根据用户的权限来控制某些元素的显示和隐藏，具体使用哪种方式可以根据实际情况来选择。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值