'system:user:add' 系统=> 模块 => 功能

// 后台给我们返回的
permissions: ["system:user:resetPwd"]; // 权限列表

// 前端按钮权限
<el-button v-hasPermi="['system:user:add']">新增</el-button>

// directives/index.js
export default {
  mounted(el, binding) {
    const { value } = binding
    const all_permission = ['*']
    const permissions = ['system:user:add'] //权限列表

    // 如果 value 是数组且长度大于 0
    if (value && Array.isArray(value) && value.length > 0) {
      const permissionFlag = value

      // 检查用户是否具有指定的权限
      const hasPermission = all_permission.some(permission => permissionFlag.includes(permission)) ||
        permissions.some(permission => permissionFlag.includes(permission))

      // 如果没有权限，移除元素
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('need roles! Like v-hasPermi="[`system:user:add`]"')
    }
  }
}

• 这里我们简单看一下上面代码在这个过程之中做了哪些事情：
• 从元素挂载开始，在mounted生命周期钩子中(el:被绑定的 DOM 元素,binding:包含指令相关信息的对象,后面我们拿的value值，也就是['system:user:add']这个值)
• 判断['system:user:add']是否为我们想要的有效数组
• 判断用户是否具有指定的权限
•  没有权限的时候=>el.parentNode拿到父元素节点=>el.parentNode.removeChild(el)移除元素
  

// main.js
import hasPermi from '@/directive/hasPermi'

app.directive('hasPermi',hasPermi);

<template>
  <el-button v-hasPermi="['system:user:add']">新增</el-button>
</template>

const permissions = ['system:user:add'] // 显示按钮
const permissions = ['system:user:adds'] // 不显示按钮

// store/getters.js
const getters = {
  permissions: state => state.user.permissions
}
export default getters

import store from '@/store'
const permissions = store.getters && store.getters.permissions