Vue 功能按钮权限

判断人员拥有的角色,有没有此功能权限

在需求的功能按钮上加v-if 判断,判断条件:是否包括此权限的Key

人员拥有权限的Key 以保存至Vuex中

先封装一个方法 utils/isPoints.js

import store from '@/store'
export const isPoints = (pointsKey) => {
  // 用includes()方法来查找用户权限中是否包含此按钮的权限 返回布尔值
  return store.getters.points.includes(pointsKey)
}

引用此方法

import { isPoints } from '@/utils/isPoints.js'

在methods中加入isPoints

methods:{
  isPoints
}

直接在需要的地方加入

<el-button v-if="isPoints('此处为权限的Key')" >新增员工</el-button>

如果需求量不大 可以不封装直接用

<el-button 
  v-if="$store.getters.points.includes('此处为权限的Key')" 
  >新增员工
</el-button>

猜你喜欢

转载自blog.csdn.net/weixin_44523517/article/details/126237140
今日推荐