22.md 5.9 KB
技术文档
打开导航菜单
PIG AI Guide
切换主题搜索
[](https://wwads.cn/click/bait)[ ](https://wwads.cn/click/bundle?code=ajZTgGgWudQ8jFBWxiOCY1T5Qly4mg)
[
🔥码云GVP开源项目 16k star Uniapp + ElementUI 功能强大 支持多语言、二开方便广告
PIGX 技术指南
适配 5.0 以上单体和微服务版本
PIGX 技术指南PIG
⌘K
参与开发
快速上手
前端部分
功能使用
后端部分
扩展必看
生产部署
社区分享
更新日志
更新日期: 2025-10-23
最后更新: 2025/9/22
切换主题
前端权限管理
[](#1-组件方式)1. 组件方式
组件位置：/@/components/auth，您可能需要了解 插槽 slot
[](#单个权限验证valuexxx)单个权限验证（: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>`
[](#多个权限验证满足一个则显示valuexxxxxx)多个权限验证，满足一个则显示（: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>`
[](#多个权限验证全部满足则显示valuexxxxxx)多个权限验证，全部满足则显示（: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-指令方式)2. 指令方式
指令位置：/@/directive/authDirective.ts，您可能需要了解 自定义指令 directive
[](#单个权限验证v-authxxx)单个权限验证（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-authsxxxxxx)多个权限验证，满足一个则显示（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-allxxxxxx)多个权限验证，全部满足则显示（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-函数方式)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>`
或
`import { auth } from '/@/utils/authFunction'; <div v-if="auth('sys_file_del')">...</div>`
本页导航
1. 组件方式
单个权限验证（:value="xxx"）
多个权限验证，满足一个则显示（:value="[xxx,xxx]"）
多个权限验证，全部满足则显示（:value="[xxx,xxx]"）
2. 指令方式
单个权限验证（v-auth="xxx"）
多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
3. 函数方式