| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 03b602 | 2 | <div class="p-4 m-4 demo"> |
| 2f6253 | 3 | <Alert message="刷新后会还原" show-icon /> |
| 陈 | 4 | |
| 5 | <CurrentPermissionMode /> | |
| 6 | ||
| 7 | <p> | |
| 8 | 当前拥有的code列表: <a> {{ permissionStore.getPermCodeListState }} </a> | |
| 9 | </p> | |
| 10 | <Divider /> | |
| 11 | <Alert class="mt-4" type="info" message="点击后请查看按钮变化" show-icon /> | |
| 12 | <Divider /> | |
| 13 | <a-button type="primary" class="mr-2" @click="changePermissionCode('2')"> | |
| 14 | 点击切换按钮权限(用户id为2) | |
| 15 | </a-button> | |
| 16 | <a-button type="primary" @click="changePermissionCode('1')"> | |
| 17 | 点击切换按钮权限(用户id为1,默认) | |
| 18 | </a-button> | |
| 19 | ||
| 20 | <Divider>组件方式判断权限</Divider> | |
| 21 | <Authority :value="'1000'"> | |
| 22 | <a-button type="primary" class="mx-4">拥有code ['1000']权限可见</a-button> | |
| 23 | </Authority> | |
| 24 | ||
| 25 | <Authority :value="'2000'"> | |
| 26 | <a-button color="success" class="mx-4">拥有code ['2000']权限可见</a-button> | |
| 27 | </Authority> | |
| 28 | ||
| 29 | <Authority :value="['1000', '2000']"> | |
| 30 | <a-button color="error" class="mx-4">拥有code ['1000','2000']角色权限可见</a-button> | |
| 31 | </Authority> | |
| 32 | ||
| 33 | <Divider>函数方式方式判断权限</Divider> | |
| 34 | <a-button v-if="hasPermission('1000')" type="primary" class="mx-4"> | |
| 35 | 拥有code ['1000']权限可见 | |
| 36 | </a-button> | |
| 37 | ||
| 38 | <a-button v-if="hasPermission('2000')" color="success" class="mx-4"> | |
| 39 | 拥有code ['2000']权限可见 | |
| 40 | </a-button> | |
| 41 | ||
| 42 | <a-button v-if="hasPermission(['1000', '2000'])" color="error" class="mx-4"> | |
| 43 | 拥有code ['1000','2000']角色权限可见 | |
| 44 | </a-button> | |
| 45 | ||
| 46 | <Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider> | |
| 47 | <a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button> | |
| 48 | ||
| 49 | <a-button v-auth="'2000'" color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button> | |
| 50 | ||
| 51 | <a-button v-auth="['1000', '2000']" color="error" class="mx-4"> | |
| 52 | 拥有code ['1000','2000']角色权限可见 | |
| 53 | </a-button> | |
| 54 | </div> | |
| 55 | </template> | |
| 56 | <script lang="ts"> | |
| 57 | import { defineComponent } from 'vue'; | |
| 58 | import { Alert, Divider } from 'ant-design-vue'; | |
| 59 | import CurrentPermissionMode from '../CurrentPermissionMode.vue'; | |
| 60 | import { usePermission } from '/@/hooks/web/usePermission'; | |
| 61 | import Authority from '/@/components/Authority'; | |
| 62 | import { getPermCodeByUserId } from '/@/api/sys/user'; | |
| 63 | import { permissionStore } from '/@/store/modules/permission'; | |
| 64 | import { PermissionModeEnum } from '/@/enums/appEnum'; | |
| 65 | export default defineComponent({ | |
| 66 | components: { Alert, CurrentPermissionMode, Divider, Authority }, | |
| 67 | setup() { | |
| 68 | const { hasPermission } = usePermission(); | |
| 69 | ||
| 70 | // !模拟从后台获取权限编码， 该函数可能只需要执行一次，实际项目可以自行放到合适的时机 | |
| 71 | async function changePermissionCode(userId: string) { | |
| 72 | const codeList = await getPermCodeByUserId({ userId }); | |
| 73 | permissionStore.commitPermCodeListState(codeList); | |
| 74 | } | |
| 75 | // 默认初始化为1 | |
| 76 | changePermissionCode('1'); | |
| 77 | return { | |
| 78 | hasPermission, | |
| 79 | permissionStore, | |
| 80 | changePermissionCode, | |
| 81 | PermissionModeEnum, | |
| 82 | }; | |
| 83 | }, | |
| 84 | }); | |
| 85 | </script> | |
| 03b602 | 86 | <style lang="less" scoped> |
| N | 87 | .demo { |
| 88 | background: #fff; | |
| 89 | } | |
| 90 | </style> | |
