| | |
| | | <template> |
| | | <div class="demo p-4 m-4"> |
| | | <Alert |
| | | message="由于刷新的时候会请求用户信息接口,会根据接口重置角色信息,所以刷新后界面会恢复原样,如果不需要,可以注释 src/layout/default/index内的获取用户信息接口" |
| | | show-icon |
| | | /> |
| | | <PageWrapper |
| | | title="前端权限按钮示例" |
| | | contentBackground |
| | | contentClass="p-4" |
| | | content="由于刷新的时候会请求用户信息接口,会根据接口重置角色信息,所以刷新后界面会恢复原样,如果不需要,可以注释 src/layout/default/index内的获取用户信息接口" |
| | | > |
| | | <CurrentPermissionMode /> |
| | | |
| | | <p> |
| | | 当前角色: <a> {{ userStore.getRoleListState }} </a> |
| | | 当前角色: <a> {{ userStore.getRoleList }} </a> |
| | | </p> |
| | | <Alert class="mt-4" type="info" message="点击后请查看按钮变化" show-icon /> |
| | | |
| | |
| | | </div> |
| | | <Divider>组件方式判断权限(有需要可以自行全局注册)</Divider> |
| | | <Authority :value="RoleEnum.SUPER"> |
| | | <a-button type="primary" class="mx-4">拥有super角色权限可见</a-button> |
| | | <a-button type="primary" class="mx-4"> 拥有super角色权限可见 </a-button> |
| | | </Authority> |
| | | |
| | | <Authority :value="RoleEnum.TEST"> |
| | | <a-button color="success" class="mx-4">拥有test角色权限可见</a-button> |
| | | <a-button color="success" class="mx-4"> 拥有test角色权限可见 </a-button> |
| | | </Authority> |
| | | |
| | | <Authority :value="[RoleEnum.TEST, RoleEnum.SUPER]"> |
| | | <a-button color="error" class="mx-4">拥有[test,super]角色权限可见</a-button> |
| | | <a-button color="error" class="mx-4"> 拥有[test,super]角色权限可见 </a-button> |
| | | </Authority> |
| | | |
| | | <Divider>函数方式方式判断权限(适用于函数内部过滤)</Divider> |
| | |
| | | <a-button v-auth="[RoleEnum.TEST, RoleEnum.SUPER]" color="error" class="mx-4"> |
| | | 拥有[test,super]角色权限可见 |
| | | </a-button> |
| | | </div> |
| | | </PageWrapper> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { computed, defineComponent } from 'vue'; |
| | | import { Alert, Divider } from 'ant-design-vue'; |
| | | import CurrentPermissionMode from '../CurrentPermissionMode.vue'; |
| | | import { userStore } from '/@/store/modules/user'; |
| | | import { useUserStore } from '/@/store/modules/user'; |
| | | import { RoleEnum } from '/@/enums/roleEnum'; |
| | | import { usePermission } from '/@/hooks/web/usePermission'; |
| | | import { Authority } from '/@/components/Authority'; |
| | | import { PageWrapper } from '/@/components/Page'; |
| | | |
| | | export default defineComponent({ |
| | | components: { Alert, CurrentPermissionMode, Divider, Authority }, |
| | | components: { Alert, PageWrapper, CurrentPermissionMode, Divider, Authority }, |
| | | setup() { |
| | | const { changeRole, hasPermission } = usePermission(); |
| | | const userStore = useUserStore(); |
| | | |
| | | return { |
| | | userStore, |
| | | RoleEnum, |
| | | isSuper: computed(() => userStore.getRoleListState.includes(RoleEnum.SUPER)), |
| | | isTest: computed(() => userStore.getRoleListState.includes(RoleEnum.TEST)), |
| | | isSuper: computed(() => userStore.getRoleList.includes(RoleEnum.SUPER)), |
| | | isTest: computed(() => userStore.getRoleList.includes(RoleEnum.TEST)), |
| | | changeRole, |
| | | hasPermission, |
| | | }; |
| | |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .demo { |
| | | background: #fff; |
| | | background: @component-background; |
| | | } |
| | | </style> |