link-wechat-web-pc/src/directive/permission/hasRole.js

/**
 * 角色权限处理指令
 * 该指令用于根据用户的角色控制元素的显示与隐藏
 */

import store from '@/store' // 导入 Vuex store，以获取用户的角色信息

export default {
  // 当指令被绑定到元素上时调用
  inserted(el, binding, vnode) {
    const { value } = binding // 获取指令传入的值
    const super_admin = "admin"; // 定义超级管理员角色
    const roles = store.getters && store.getters.roles // 从 Vuex store 获取当前用户的角色列表

    // 检查指令值是否存在，并且是一个非空数组
    if (value && value instanceof Array && value.length > 0) {
      const roleFlag = value // 将传入的角色值赋给 roleFlag

      // 检查用户是否具有所需的角色
      const hasRole = roles.some(role => {
        // 如果用户是超级管理员，或者用户的角色列表中包含所需的角色
        return super_admin === role || roleFlag.includes(role)
      })

      // 如果用户没有所需的角色
      if (!hasRole) {
        // 从 DOM 中移除该元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      // 如果没有设置角色权限标签值，抛出错误
      throw new Error(`请设置角色权限标签值`)
    }
  }
}