| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 03b602 | 2 | <div class="demo p-4 m-4"> |
| 2f6253 | 3 | <Alert |
| 陈 | 4 | message="由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，所以刷新后界面会恢复原样，如果不需要，可以注释 src/layout/default/index内的获取用户信息接口" |
| 5 | show-icon | |
| 6 | /> | |
| 7 | <CurrentPermissionMode /> | |
| 8 | ||
| 9 | <p> | |
| 10 | 当前角色: <a> {{ userStore.getRoleListState }} </a> | |
| 11 | </p> | |
| 12 | <Alert class="mt-4" type="info" message="点击后请查看按钮变化" show-icon /> | |
| 13 | ||
| 14 | <div class="mt-4"> | |
| 15 | 权限切换(请先切换权限模式为前端角色权限模式): | |
| 16 | <a-button-group> | |
| 17 | <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : ''"> | |
| 18 | {{ RoleEnum.SUPER }} | |
| 19 | </a-button> | |
| 20 | <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : ''"> | |
| 21 | {{ RoleEnum.TEST }} | |
| 22 | </a-button> | |
| 23 | </a-button-group> | |
| 24 | </div> | |
| 25 | <Divider>组件方式判断权限(有需要可以自行全局注册)</Divider> | |
| 26 | <Authority :value="RoleEnum.SUPER"> | |
| 27 | <a-button type="primary" class="mx-4">拥有super角色权限可见</a-button> | |
| 28 | </Authority> | |
| 29 | ||
| 30 | <Authority :value="RoleEnum.TEST"> | |
| 31 | <a-button color="success" class="mx-4">拥有test角色权限可见</a-button> | |
| 32 | </Authority> | |
| 33 | ||
| 34 | <Authority :value="[RoleEnum.TEST, RoleEnum.SUPER]"> | |
| 35 | <a-button color="error" class="mx-4">拥有[test,super]角色权限可见</a-button> | |
| 36 | </Authority> | |
| 37 | ||
| 38 | <Divider>函数方式方式判断权限(适用于函数内部过滤)</Divider> | |
| 39 | <a-button v-if="hasPermission(RoleEnum.SUPER)" type="primary" class="mx-4"> | |
| 40 | 拥有super角色权限可见 | |
| 41 | </a-button> | |
| 42 | ||
| 43 | <a-button v-if="hasPermission(RoleEnum.TEST)" color="success" class="mx-4"> | |
| 44 | 拥有test角色权限可见 | |
| 45 | </a-button> | |
| 46 | ||
| 47 | <a-button v-if="hasPermission([RoleEnum.TEST, RoleEnum.SUPER])" color="error" class="mx-4"> | |
| 48 | 拥有[test,super]角色权限可见 | |
| 49 | </a-button> | |
| 50 | ||
| 51 | <Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider> | |
| 52 | <a-button v-auth="RoleEnum.SUPER" type="primary" class="mx-4"> 拥有super角色权限可见 </a-button> | |
| 53 | ||
| 54 | <a-button v-auth="RoleEnum.TEST" color="success" class="mx-4"> 拥有test角色权限可见 </a-button> | |
| 55 | ||
| 56 | <a-button v-auth="[RoleEnum.TEST, RoleEnum.SUPER]" color="error" class="mx-4"> | |
| 57 | 拥有[test,super]角色权限可见 | |
| 58 | </a-button> | |
| 59 | </div> | |
| 60 | </template> | |
| 61 | <script lang="ts"> | |
| 62 | import { computed, defineComponent } from 'vue'; | |
| 63 | import { Alert, Divider } from 'ant-design-vue'; | |
| 64 | import CurrentPermissionMode from '../CurrentPermissionMode.vue'; | |
| 65 | import { userStore } from '/@/store/modules/user'; | |
| 66 | import { RoleEnum } from '/@/enums/roleEnum'; | |
| 67 | import { usePermission } from '/@/hooks/web/usePermission'; | |
| 68 | import Authority from '/@/components/Authority'; | |
| 69 | ||
| 70 | export default defineComponent({ | |
| 71 | components: { Alert, CurrentPermissionMode, Divider, Authority }, | |
| 72 | setup() { | |
| 73 | const { changeRole, hasPermission } = usePermission(); | |
| 74 | return { | |
| 75 | userStore, | |
| 76 | RoleEnum, | |
| 77 | isSuper: computed(() => userStore.getRoleListState.includes(RoleEnum.SUPER)), | |
| 78 | isTest: computed(() => userStore.getRoleListState.includes(RoleEnum.TEST)), | |
| 79 | changeRole, | |
| 80 | hasPermission, | |
| 81 | }; | |
| 82 | }, | |
| 83 | }); | |
| 84 | </script> | |
| 03b602 | 85 | <style lang="less" scoped> |
| N | 86 | .demo { |
| 87 | background: #fff; | |
| 88 | } | |
| 89 | </style> | |
