​
组件方式

组件位置

/@/components/auth

您可能需要了解 Vue 插槽 slot

​
单个权限验证

使用 :value="xxx" 属性进行单个权限验证：

<template>
  <slot v-if="getUserAuthBtnList" />
</template>

<script setup lang="ts" name="auth">
  import { computed } from "vue";
  import { storeToRefs } from "pinia";
  import { useUserInfo } from "/@/stores/userInfo";

  // 定义父组件传过来的值
  const props = defineProps({
    value: {
      type: String,
      default: () => "",
    },
  });

  // 定义变量内容
  const stores = useUserInfo();
  const { userInfos } = storeToRefs(stores);

  // 获取 pinia 中的用户权限
  const getUserAuthBtnList = computed(() => {
    return userInfos.value.authBtnList.some((v: string) => v === props.value);
  });
</script>

页面中使用：

<template>
  <Auth :value="'btn.add'" />
</template>

<script setup lang="ts" name="xxx">
  // 局部引入
  import Auth from "/@/components/auth/auth.vue";
</script>

​
多个权限验证（满足一个则显示）

使用 :value="[xxx,xxx]" 属性进行多个权限验证：

<template>
  <Auths :value="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']" />
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  // 局部引入
  import Auths from "/@/components/auth/auths.vue";

  export default defineComponent({
    name: "xxxx",
    // 局部注册
    components: { Auths },
  });
</script>

​
多个权限验证（全部满足则显示）

使用 :value="[xxx,xxx]" 属性进行多个权限验证：

<template>
  <AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']" />
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  // 局部引入
  import AuthAll from "/@/components/auth/authAll.vue";

  export default defineComponent({
    name: "xxxx",
    // 局部注册
    components: { AuthAll },
  });
</script>

​
指令方式

指令位置

/@/directive/authDirective.ts

您可能需要了解 Vue 自定义指令 directive

​
单个权限验证

使用 v-auth="xxx" 指令进行单个权限验证：

<div v-auth="'btn.add'">
  <el-button>新增</el-button>
</div>

<div v-auth="'btn.edit'">
  <el-button>编辑</el-button>
</div>

<div v-auth="'btn.del'">
  <el-button>删除</el-button>
</div>

<div v-auth="'btn.link'">
  <el-button>跳转</el-button>
</div>

​
多个权限验证（满足一个则显示）

使用 v-auths="[xxx,xxx]" 指令进行多个权限验证：

<div v-auths="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
  <el-button>新增</el-button>
</div>

<div v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
  <el-button>编辑</el-button>
</div>

​
多个权限验证（全部满足则显示）

使用 v-auth-all="[xxx,xxx]" 指令进行多个权限验证：

<div v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
  <el-button>新增</el-button>
</div>

<div v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
  <el-button>编辑</el-button>
</div>

​
函数方式

方法位置

/@/utils/authFunction.ts

用于方法中的权限判断，使用方法如下：

<script lang="ts" setup>
  import { ElMessage } from 'element-plus';
  import { auth, auths, authAll } from '/@/utils/authFunction';

  // 单个权限验证
  const onAuthClick = () => {
    if (!auth('btn.add')) ElMessage.error('抱歉，您没有权限！');
    else ElMessage.success('恭喜，您有权限！');
  };
  
  // 多个权限验证，满足一个则为 true
  const onAuthsClick = () => {
    if (!auths(['btn.add', 'btn.edit'])) ElMessage.error('抱歉，您没有权限！');
    else ElMessage.success('恭喜，您有权限！');
  };
  
  // 多个权限验证，全部满足则为 true
  const onAuthAllClick = () => {
    if (!authAll(['btn.add', 'btn.edit'])) ElMessage.error('抱歉，您没有权限！');
    else ElMessage.success('恭喜，您有权限！');
  };
</script>

​
♥️ 获取支持

遇到问题？

如果您在使用过程中遇到任何问题、有功能建议或需求，请点击此卡片前往 Gitee 仓库提交 Issue。