技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/U3n343DCMimUvbTZX1xnbYkOoPlTBBVBjzP4bqjf.jpg)
](https://wwads.cn/click/bundle?code=ajZTgGgWudQ8jFBWxiOCY1T5Qly4mg)

[🔥**码云GVP开源项目 16k star** Uniapp + ElementUI 功能强大 支持多语言、二开方便](https://wwads.cn/click/bundle?code=ajZTgGgWudQ8jFBWxiOCY1T5Qly4mg)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/9/22

切换主题

前端权限管理
======

### [](#1-组件方式)1\. 组件方式

组件位置：[/@/components/auth](#/src/components/auth)，您可能需要了解 [插槽 slot](https://v3.cn.vuejs.org/guide/component-slots.html)

#### [](#单个权限验证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](#/src/directive)，您可能需要了解 [自定义指令 directive](https://v3.cn.vuejs.org/guide/custom-directive.html)

#### [](#单个权限验证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](#/src/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\. 函数方式