Vue项目 针对角色配置权限之按钮权限

---

前言

通过自定义指令控制按钮权限，菜单权限需要综合权限数据和本地路由信息进行过滤

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、菜单权限

参考：https://blog.csdn.net/Julia_0502/article/details/121825422

二、按钮权限

1.自定义权限指令（v-permission）

• 创建permission文件
• - permission.js文件

import store from '@/store'

function checkPermission(el, binding) {
  const { value } = binding

  if (value && typeof value === 'object') {
    const action = binding.value.action
    // 按钮权限数据 authList
    const authList =
      store.getters && store.getters.authList?.map(auth => auth.path)
    if (authList) {
      if (authList.indexOf(action) === -1) {
        // 不具备权限
        const type = binding.value.effect
        if (type === 'disabled') {
          // 禁用按钮
          el.disabled = true
          el.classList.add('is-disabled')
        } else {
          // 删除按钮
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    }
  } else {
    // 指令使用方式  v-permission="{ action: 'shipment.application:detail',effect:'disabled' }"
    // 格式错误，抛出异常
    throw new Error(
      `need permission! Like v-permission="{ action: 'shipment.application:detail',effect:'disabled' }"`
    )
  }
}

export default {
  inserted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  }
}

• index.js

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

2.全局引入自定义指令

• 在main.js文件中引入自定义指令

import permission from '@/directive/permission/index.js'
Vue.use(permission)

3.使用方式

• 使用action，无权限时则删除按钮

  <div v-permission="{ action: 'role.permission:update' }">编辑</div>

• 使用disabled，无权限时则禁用按钮

  <el-button v-permission="{ disabled: 'role.permission:update' }" >编辑</el-button>

总结

• 菜单和按钮的权限配置页面及数据结构参考：https://blog.csdn.net/Julia_0502/article/details/117293713?spm=1001.2014.3001.5501

提示：
本文章只是记录权限控制按钮的方法，避免忘记，若有不足，欢迎指教