【权限】v-hasPermi=“[‘monitor:job:add‘]“ 这个属性是怎么控制能不能看到这个按钮

背景：对于前台中通过指令对于操作按钮的控制是怎么实现的：

		<el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:role:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:role:edit']"
            >修改</el-button>
         </el-col>

v-hasPermi 是一个自定义指令，用于控制组件的显示或隐藏。这个指令通常用于基于用户权限来动态显示或隐藏页面元素。在你的例子中，v-hasPermi="['monitor:job:add']" 表示只有当用户拥有 monitor:job:add 权限时，这个按钮才会显示。

具体实现方式可能因项目而异，但通常包括以下几个步骤：

1. 定义指令：在 Vue 项目中定义一个全局指令，比如 v-hasPermi，用于检查用户权限。
2. 获取用户权限：在用户登录时，从后端获取用户的权限信息，并存储在 Vuex 或其他状态管理工具中。
3. 指令逻辑：在 v-hasPermi 指令中，根据用户权限信息判断是否显示元素。

以下是一个简单的示例，展示如何实现 v-hasPermi 指令：

整体过程：
src\directive\permission\hasPermi.js

 /**
 * v-hasPermi 操作权限处理
 * Copyright (c) 2019 ruoyi
 */
 
import useUserStore from '@/store/modules/user'

export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = useUserStore().permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

解释一下：其中的父节点的概念：
在这个 Vue 组件中， 元素的父节点 DOM 是 元素。

具体来说：

是一个按钮元素，它被 v-hasPermi 指令和几个其他属性（如 type、plain、icon、@click）修饰。
是一个来自 Element UI 库的列元素，它使用 :span=“1.5” 属性来定义列的宽度。
因此， 的父节点是 ，而 的父节点是 或

等其他元素

定义完之后，需要去注册自定义指令到VUE应用中

import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'
import copyText from './common/copyText'

export default function directive(app){
  app.directive('hasRole', hasRole)
  app.directive('hasPermi', hasPermi)
  app.directive('copyText', copyText)
}

这段代码定义了一个函数 directive，它接收一个参数 app，通常这个 app 是 Vue 的实例。这个函数的作用是注册一些自定义指令到 Vue 应用中。

具体来说，这段代码注册了三个自定义指令：

hasRole：这个指令用于基于用户角色来控制组件的显示或隐藏。
hasPermi：这个指令用于基于用户权限来控制组件的显示或隐藏。
copyText：这个指令用于实现文本的复制功能。
每个指令的具体实现逻辑会在 hasRole、hasPermi 和 copyText 函数中定义。这些函数通常会接收一些参数，比如指令绑定的值、元素、虚拟节点等，然后根据这些参数来实现特定的功能。

在vue页面组件中使用：

<el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:role:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:role:edit']"
            >修改</el-button>
      </el-col>

实现显隐的原理：
在这段代码中，el 是一个 DOM 元素，el.parentNode 是获取这个 DOM 元素的父节点。

具体来说：

el：这是指令绑定的元素，即当前正在处理的元素。
el.parentNode：这是获取 el 的父节点。父节点是包含当前元素的 DOM 元素。
el.parentNode && el.parentNode.removeChild(el) 这行代码的意思是，如果 el.parentNode 存在（即 el 有父节点），则从 DOM 中移除 el。

这是因为在 Vue 中，使用 v-hasPermi 指令时，如果用户没有相应的权限，我们希望从 DOM 中移除这个元素，从而避免用户看到没有权限的按钮或链接。