index.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <PageWrapper
  3. title="前端权限示例"
  4. contentBackground
  5. contentClass="p-4"
  6. content="由于刷新的时候会请求用户信息接口,会根据接口重置角色信息,所以刷新后界面会恢复原样,如果不需要,可以注释 src/layout/default/index内的获取用户信息接口"
  7. >
  8. <CurrentPermissionMode />
  9. <p>
  10. 当前角色: <a> {{ userStore.getRoleList }} </a>
  11. </p>
  12. <Alert class="mt-4" type="info" message="点击后请查看左侧菜单变化" show-icon />
  13. <div class="mt-4">
  14. 权限切换(请先切换权限模式为前端角色权限模式):
  15. <Space>
  16. <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
  17. {{ RoleEnum.SUPER }}
  18. </a-button>
  19. <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
  20. {{ RoleEnum.TEST }}
  21. </a-button>
  22. </Space>
  23. </div>
  24. </PageWrapper>
  25. </template>
  26. <script lang="ts">
  27. import { computed, defineComponent } from 'vue';
  28. import { Alert, Space } from 'ant-design-vue';
  29. import { useUserStore } from '/@/store/modules/user';
  30. import { RoleEnum } from '/@/enums/roleEnum';
  31. import { usePermission } from '/@/hooks/web/usePermission';
  32. import { PageWrapper } from '/@/components/Page';
  33. import CurrentPermissionMode from '../CurrentPermissionMode.vue';
  34. export default defineComponent({
  35. components: { Space, Alert, CurrentPermissionMode, PageWrapper },
  36. setup() {
  37. const { changeRole } = usePermission();
  38. const userStore = useUserStore();
  39. return {
  40. userStore,
  41. RoleEnum,
  42. isSuper: computed(() => userStore.getRoleList.includes(RoleEnum.SUPER)),
  43. isTest: computed(() => userStore.getRoleList.includes(RoleEnum.TEST)),
  44. changeRole,
  45. };
  46. },
  47. });
  48. </script>
  49. <style lang="less" scoped>
  50. .demo {
  51. background-color: @component-background;
  52. }
  53. </style>