简洁明了:基于eova平台,对Vue 页面中的自定义Button按钮进行用户权限控制处理

1、eova平台中在指定页面中增加一个按钮,这回产生一个id,eova就是通过这个id来对按钮进行权限控制的:

2、vue项目中:

.vue文件 画一个按钮 并给一个v-if动作

<div class="btn_tj">
    <Button style="" type="primary" @click="updBjsz" v-if="hasAccess(8041)">提交</Button>
</div>

.js文件 


import { mapGetters, mapState,mapActions } from 'vuex'
import { oneOf } from '@/libs/tools'

export default {

    name: "xx",

    computed: {
        ...mapState({
            accessList: state => state.user.accessList, //获取当前用户已有使用权限的按钮的id
            userInfo:state => state.user.userInfo,
        }),
    },

    methods: {

        hasAccess (access) {  
            return oneOf(access, this.accessList)
        },

    }

上面这个js文件里很多代码其实是自定义的,不是通用的jar包。@/libs/tools里面的 oneOf其实就是一个字符串判断方法(详细实现见下面代码),将需要判断的一个字符串和一个字符串列表进行比对,相等就返回true。

用户按钮权限的控制就是通过登录时先拿到用户的一个按钮权限集(这里面装的是当前用户拥有使用权限的按钮的id,这些id就是eova里面新增按钮时自动生成的id),当验证某个按钮权限时,只需要将需要验证的按钮的id拿去和用户的按钮id集一一比对,若有相等的,则证明已拥有对该id的权限,并返回true,此时v-if=true,按钮可用,反之...

/**
 * value 要验证的字符串或数值 (要验证的按钮 id)
 * validList 用来验证的列表(用户的按钮权限列表 里面装的是当前用户拥有的按钮id(权限))
 */
export function oneOf (value, validList) {
  for (let i = 0; i < validList.length; i++) {
    if (value === validList[i]) {
      return true
    }
  }
  return false
}

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值