ant-vue-admin/src/views/test/index.vue

<template>
  <PageWrapper title="后台权限示例" contentBackground contentClass="p-4">
    <div class="mt-2">
      当前权限模式：
      <a-button type="link">
        {{ permissionMode === PermissionModeEnum.BACK ? '后台权限模式' : '前端角色权限模式' }}
      </a-button>
      <a-button class="ml-4" @click="togglePermissionMode" type="primary"> 切换权限模式 </a-button>
      <Divider />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { useAppStore } from '/@/store/modules/app';
  import { PermissionModeEnum } from '/@/enums/appEnum';
  import { Divider } from 'ant-design-vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { PageWrapper } from '/@/components/Page';

  export default defineComponent({
    name: 'CurrentPermissionMode',
    components: { Divider, PageWrapper },
    setup() {
      const appStore = useAppStore();
      const permissionMode = computed(() => appStore.getProjectConfig.permissionMode);
      const { togglePermissionMode } = usePermission();

      return {
        permissionMode,
        PermissionModeEnum,
        togglePermissionMode,
      };
    },
  });
</script>