面试题：vuejs项目中按钮级别权限怎么控制

利用hasPermission统一的权限判断方法进行按钮判断是否显示！

VUE组件代码：

<template>
  <a-button v-if="hasPermission(['20000', '20001', '20003'])">
    code拥有[20000,20001,20003]可见
  </a-button>
</template>

<script lang="ts">
  import { usePermission } from '/@/hooks/usePermission';

  export default defineComponent({
    setup() {
      const { hasPermission } = usePermission();
      return { hasPermission };
    },
  });
</script>

JS代码：

export function usePermission() {
  function hasPermission(value, def = true) {
    // 默认视为有权限
    if (!value) {
      return def;
    }

    const allCodeList = permissionStore.getPermCodeList;
    if (!isArray(value)) {
      return allCodeList.includes(value);
    }
    // intersection是lodash提供的一个方法，用于返回一个所有给定数组都存在的元素组成的数组
    return (intersection(value, allCodeList)).length > 0;

    return true;
  }
}

以上是编程学习网小编为您介绍的“面试题：vuejs项目中按钮级别权限怎么控制”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。