📄 前端权限管理

1. 组件方式

组件位置：/@/components/auth，您可能需要了解 插槽 slot (opens new window)

单个权限验证（:value="xxx"）

• 组件代码，注意看 some 高亮处判断，根据需求适当时候需要自行修改

<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>

2. 指令方式

指令位置：/@/directive/authDirective.ts，您可能需要了解 自定义指令 directive (opens new window)

单个权限验证（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>

3. 函数方式

方法位置：/@/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>