JLC Docs
PIG
AI
PIG
AI

前端权限管理

组件方式

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

单个权限验证

权限判断逻辑

组件使用 some 方法进行权限验证，根据实际需求可以自行修改判断逻辑。

1<template>
2  <slot v-if="getUserAuthBtnList" />
3</template>
4
5<script setup lang="ts" name="auth">
6  import { computed } from "vue";
7  import { storeToRefs } from "pinia";
8  import { useUserInfo } from "/@/stores/userInfo";
9
10  // 定义父组件传过来的值
11  const props = defineProps({
12    value: {
13      type: String,
14      default: () => "",
15    },
16  });
17
18  // 定义变量内容
19  const stores = useUserInfo();
20  const { userInfos } = storeToRefs(stores);
21
22  // 获取 pinia 中的用户权限
23  const getUserAuthBtnList = computed(() => {
24    return userInfos.value.authBtnList.some((v: string) => v === props.value);
25  });
26</script>

页面中使用：

1<template>
2  <!-- 使用 -->
3  <Auth :value="'btn.add'" />
4</template>
5
6<script setup lang="ts" name="xxx">
7  // 局部引入
8  import Auth from "/@/components/auth/auth.vue";
9</script>

多个权限验证（满足一个）

当需要验证多个权限时，只要满足其中一个权限即可显示组件。

1<template>
2  <!-- 使用 -->
3  <Auths :value="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']" />
4</template>
5
6<script lang="ts">
7  import { defineComponent } from "vue";
8  // 局部引入
9  import Auths from "/@/components/auth/auths.vue";
10
11  export default defineComponent({
12    name: "xxxx",
13    // 局部注册
14    components: { Auths },
15  });
16</script>

多个权限验证（全部满足）

当需要验证多个权限时，必须全部满足才能显示组件。

1<template>
2  <!-- 使用 -->
3  <AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']" />
4</template>
5
6<script lang="ts">
7  import { defineComponent } from "vue";
8  // 局部引入
9  import AuthAll from "/@/components/auth/authAll.vue";
10
11  export default defineComponent({
12    name: "xxxx",
13    // 局部注册
14    components: { AuthAll },
15  });
16</script>

指令方式

Vue 自定义指令

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

单个权限验证

使用 v-auth 指令进行单个权限验证。

<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 指令进行多个权限验证，满足其中一个即可显示。

<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 指令进行多个权限验证，必须全部满足才能显示。

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

在模板中使用

也可以在模板中结合 v-if 指令使用。

import { auth } from '/@/utils/authFunction';
<div v-if="auth('sys_file_del')">...</div>
本页目录