📄 前端权限管理 _ PIGCLOUD
](https://www.pig4cloud.com/)
产品
商业版
生态🔥
📄 前端权限管理
pigcloud
# 1. 组件方式
组件位置：/@/components/auth，您可能需要了解 插槽 slot (opens new window)
# 单个权限验证（:value=”xxx”）
- 组件代码，注意看
some 高亮处判断，根据需求适当时候需要自行修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <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);
const getUserAuthBtnList = computed(() => {
return userInfos.value.authBtnList.some((v: string) => v === props.value);
});
</script>
Copied!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<Auth :value="'btn.add'" />
</template>
<script setup lang="ts" name="xxx">
import Auth from "/@/components/auth/auth.vue";
</script>
Copied!
|
# 多个权限验证，满足一个则显示（:value=”[xxx,xxx]“）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <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>
Copied!
|
# 多个权限验证，全部满足则显示（:value=”[xxx,xxx]“）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <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>
Copied!
|
# 2. 指令方式
指令位置：/@/directive/authDirective.ts，您可能需要了解 自定义指令 directive (opens new window)
# 单个权限验证（v-auth=”xxx”）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <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>
Copied!
|
# 多个权限验证，满足一个则显示（v-auths=”[xxx,xxx]“）
1
2
3
4
5
6
7
8
9
10
11
12
| <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>
Copied!
|
# 多个权限验证，全部满足则显示（v-auth-all=”[xxx,xxx]“）
1
2
3
4
5
6
7
8
9
10
11
12
| <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>
Copied!
|
# 3. 函数方式
方法位置：/@/utils/authFunction.ts，用于方法中的判断，使用方法如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <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('恭喜，您有权限！');
};
const onAuthsClick = () => {
if (!auths(['btn.add', 'btn.edit'])) ElMessage.error('抱歉，您没有权限！');
else ElMessage.success('恭喜，您有权限！');
};
const onAuthAllClick = () => {
if (!authAll(['btn.add', 'btn.edit')) ElMessage.error('抱歉，您没有权限！');
else ElMessage.success('恭喜，您有权限！');
};
</script>
Copied!
|
📄 前端图表功能 📄 前端数据状态管理
