<template>
|
<PageWrapper contentBackground title="按钮权限控制" contentClass="p-4">
|
<CurrentPermissionMode />
|
<p>
|
当前拥有的code列表: <a> {{ permissionStore.getPermCodeList }} </a>
|
</p>
|
<Divider />
|
<Alert
|
class="mt-4"
|
type="info"
|
message="点击后请查看按钮变化(必须处于后台权限模式才可测试此页面所展示的功能)"
|
show-icon
|
/>
|
<Divider />
|
<a-button type="primary" class="mr-2" @click="switchToken(2)" :disabled="!isBackPermissionMode">
|
点击切换按钮权限(用户id为2)
|
</a-button>
|
<a-button type="primary" @click="switchToken(1)" :disabled="!isBackPermissionMode">
|
点击切换按钮权限(用户id为1,默认)
|
</a-button>
|
|
<template v-if="isBackPermissionMode">
|
<Divider>组件方式判断权限</Divider>
|
<Authority :value="'1000'">
|
<a-button type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
|
</Authority>
|
|
<Authority :value="'2000'">
|
<a-button color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
|
</Authority>
|
|
<Authority :value="['1000', '2000']">
|
<a-button color="error" class="mx-4"> 拥有code ['1000','2000']角色权限可见 </a-button>
|
</Authority>
|
|
<Divider>函数方式方式判断权限</Divider>
|
<a-button v-if="hasPermission('1000')" type="primary" class="mx-4">
|
拥有code ['1000']权限可见
|
</a-button>
|
|
<a-button v-if="hasPermission('2000')" color="success" class="mx-4">
|
拥有code ['2000']权限可见
|
</a-button>
|
|
<a-button v-if="hasPermission(['1000', '2000'])" color="error" class="mx-4">
|
拥有code ['1000','2000']角色权限可见
|
</a-button>
|
|
<Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider>
|
<a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
|
|
<a-button v-auth="'2000'" color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
|
|
<a-button v-auth="['1000', '2000']" color="error" class="mx-4">
|
拥有code ['1000','2000']角色权限可见
|
</a-button>
|
</template>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { computed } from 'vue';
|
import { Alert, Divider } from 'ant-design-vue';
|
import CurrentPermissionMode from '../CurrentPermissionMode.vue';
|
import { usePermission } from '@/hooks/web/usePermission';
|
import { Authority } from '@/components/Authority';
|
import { usePermissionStore } from '@/store/modules/permission';
|
import { PermissionModeEnum } from '@/enums/appEnum';
|
import { PageWrapper } from '@/components/Page';
|
import { useAppStore } from '@/store/modules/app';
|
import { useUserStore } from '@/store/modules/user';
|
|
const { hasPermission } = usePermission();
|
const permissionStore = usePermissionStore();
|
const appStore = useAppStore();
|
const userStore = useUserStore();
|
|
const isBackPermissionMode = computed(
|
() => appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK,
|
);
|
|
async function switchToken(userId: number) {
|
// 本函数切换用户登录Token的部分仅用于演示，实际生产时切换身份应当重新登录
|
const token = 'fakeToken' + userId;
|
userStore.setToken(token);
|
|
// 重新获取用户信息和菜单
|
userStore.getUserInfoAction();
|
permissionStore.changePermissionCode();
|
}
|
</script>
|
<style lang="less" scoped>
|
.demo {
|
background-color: @component-background;
|
}
|
</style>
|
