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