feat(projects): mock添加权限过滤

This commit is contained in:
Soybean
2022-04-23 12:29:09 +08:00
parent 807448aec5
commit 7f4350aeb6
9 changed files with 109 additions and 35 deletions

View File

@ -1,17 +1,9 @@
<template>
<div class="h-full">
<n-card title="权限指令 v-permission" class="h-full shadow-sm rounded-16px">
<n-card title="权限切换" class="h-full shadow-sm rounded-16px">
<div class="pb-12px">
<n-gradient-text type="primary" :size="20">当前用户的权限{{ auth.userInfo.userRole }}</n-gradient-text>
</div>
<n-space>
<n-button v-permission="`super`">super可见</n-button>
<n-button v-permission="`admin`">admin可见</n-button>
<n-button v-permission="['admin', 'test']">admin和test可见</n-button>
</n-space>
<div class="py-12px">
<n-gradient-text type="primary" :size="20">切换用户权限</n-gradient-text>
</div>
<n-select
:value="auth.userInfo.userRole"
class="w-120px"
@ -19,6 +11,22 @@
:options="roleList"
@update:value="auth.updateUserRole"
/>
<div class="py-12px">
<n-gradient-text type="primary" :size="20">权限指令 v-permission</n-gradient-text>
</div>
<div>
<n-button v-permission="'super'" class="mr-12px">super可见</n-button>
<n-button v-permission="'admin'" class="mr-12px">admin可见</n-button>
<n-button v-permission="['admin', 'test']">admin和test可见</n-button>
</div>
<div class="py-12px">
<n-gradient-text type="primary" :size="20">权限函数 hasPermission</n-gradient-text>
</div>
<n-space>
<n-button v-if="hasPermission('super')">super可见</n-button>
<n-button v-if="hasPermission('admin')">admin可见</n-button>
<n-button v-if="hasPermission(['admin', 'test'])">admin和test可见</n-button>
</n-space>
</n-card>
</div>
</template>
@ -26,9 +34,11 @@
<script setup lang="ts">
import { watch } from 'vue';
import { useAppStore, useAuthStore } from '@/store';
import { usePermission } from '@/composables';
const app = useAppStore();
const auth = useAuthStore();
const { hasPermission } = usePermission();
const roleList = [
{ label: '超级管理员', value: 'super' },