Skip to content

Commit 3fe40ba

Browse files
kailong321200875kailong321200875
committed
feat: 新增权限测试页
1 parent c4576bd commit 3fe40ba

File tree

11 files changed

+207
-34
lines changed

11 files changed

+207
-34
lines changed

‎mock/role/index.ts

Lines changed: 68 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ const adminList = [
141141
component: 'views/Components/Table/TreeTable',
142142
name: 'TreeTable',
143143
meta: {
144-
title: 'router.TreeTable'
144+
title: 'TreeTable'
145145
}
146146
},
147147
{
@@ -151,15 +151,15 @@ const adminList = [
151151
meta: {
152152
title: 'router.PicturePreview'
153153
}
154-
},
155-
{
156-
path: 'ref-table',
157-
component: 'views/Components/Table/RefTable',
158-
name: 'RefTable',
159-
meta: {
160-
title: 'RefTable'
161-
}
162154
}
155+
// {
156+
// path: 'ref-table',
157+
// component: 'views/Components/Table/RefTable',
158+
// name: 'RefTable',
159+
// meta: {
160+
// title: 'RefTable'
161+
// }
162+
// }
163163
]
164164
},
165165
{
@@ -269,14 +269,6 @@ const adminList = [
269269
meta: {
270270
title: 'router.inputPassword'
271271
}
272-
},
273-
{
274-
path: 'sticky',
275-
component: 'views/Components/Sticky',
276-
name: 'Sticky',
277-
meta: {
278-
title: 'router.sticky'
279-
}
280272
}
281273
]
282274
},
@@ -472,6 +464,59 @@ const adminList = [
472464
}
473465
}
474466
]
467+
},
468+
{
469+
path: '/authorization',
470+
component: '#',
471+
redirect: '/authorization/user',
472+
name: 'Authorization',
473+
meta: {
474+
title: 'router.authorization',
475+
icon: 'eos-icons:role-binding',
476+
alwaysShow: true
477+
},
478+
children: [
479+
{
480+
path: 'department',
481+
component: 'views/Authorization/Department/Department',
482+
name: 'Department',
483+
meta: {
484+
title: 'router.department'
485+
}
486+
},
487+
{
488+
path: 'user',
489+
component: 'views/Authorization/User/User',
490+
name: 'User',
491+
meta: {
492+
title: 'router.user'
493+
}
494+
},
495+
{
496+
path: 'menu',
497+
component: 'views/Authorization/Menu/Menu',
498+
name: 'Menu',
499+
meta: {
500+
title: 'router.menuManagement'
501+
}
502+
},
503+
{
504+
path: 'role',
505+
component: 'views/Authorization/Role/Role',
506+
name: 'Role',
507+
meta: {
508+
title: 'router.role'
509+
}
510+
},
511+
{
512+
path: 'test',
513+
component: 'views/Authorization/Test/Test',
514+
name: 'Test',
515+
meta: {
516+
title: 'router.permission'
517+
}
518+
}
519+
]
475520
}
476521
]
477522

@@ -523,6 +568,12 @@ const testList: string[] = [
523568
'/example/example-add',
524569
'/example/example-edit',
525570
'/example/example-detail',
571+
'/authorization',
572+
'/authorization/department',
573+
'/authorization/user',
574+
'/authorization/role',
575+
'/authorization/menu',
576+
'/authorization/test',
526577
'/error',
527578
'/error/404-demo',
528579
'/error/403-demo',

‎src/components/Permission/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Permission from './src/Permission.vue'
2+
import { hasPermi } from './src/utils'
3+
4+
export { Permission, hasPermi }

‎src/components/Permission/src/Permission.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script setup lang="ts">
2+
import { propTypes } from '@/utils/propTypes'
3+
import { computed, unref } from 'vue'
4+
import { useRouter } from 'vue-router'
5+
6+
const { currentRoute } = useRouter()
7+
8+
const props = defineProps({
9+
permission: propTypes.string.def()
10+
})
11+
12+
const currentPermission = computed(() => {
13+
return unref(currentRoute)?.meta?.permission || []
14+
})
15+
16+
const hasPermission = computed(() => {
17+
const permission = unref(props.permission)
18+
if (!permission) {
19+
return true
20+
}
21+
return unref(currentPermission).includes(permission)
22+
})
23+
</script>
24+
25+
<template>
26+
<template v-if="hasPermission">
27+
<slot></slot>
28+
</template>
29+
</template>

‎src/components/Permission/src/utils.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { useI18n } from '@/hooks/web/useI18n'
2+
import router from '@/router'
3+
4+
export const hasPermi = (value: string) => {
5+
const { t } = useI18n()
6+
const permission = (router.currentRoute.value.meta.permission || []) as string[]
7+
if (!value) {
8+
throw new Error(t('permission.hasPermission'))
9+
}
10+
if (permission.includes(value)) {
11+
return true
12+
}
13+
return false
14+
}

‎src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { App } from 'vue'
22
import { Icon } from './Icon'
3+
import { Permission } from './Permission'
34

45
export const setupGlobCom = (app: App<Element>): void => {
56
app.component('Icon', Icon)
7+
app.component('Permission', Permission)
68
}

‎src/directives/permission/hasPermi.ts

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import type { App, Directive, DirectiveBinding } from 'vue'
22
import { useI18n } from '@/hooks/web/useI18n'
3-
import { useStorage } from '@/hooks/web/useStorage'
4-
import { intersection } from 'lodash-es'
5-
import { isArray } from '@/utils/is'
6-
import { useAppStoreWithOut } from '@/store/modules/app'
3+
import router from '@/router'
74

85
const { t } = useI18n()
9-
const { getStorage } = useStorage()
10-
const appStore = useAppStoreWithOut()
116

12-
// 全部权限
13-
const all_permission = ['*.*.*']
14-
const hasPermission = (value: string | string[]): boolean => {
15-
const permissions = getStorage(appStore.getUserInfo).permissions as string[]
7+
const hasPermission = (value: string): boolean => {
8+
const permission = (router.currentRoute.value.meta.permission || []) as string[]
169
if (!value) {
1710
throw new Error(t('permission.hasPermission'))
1811
}
19-
if (!isArray(value)) {
20-
return permissions?.includes(value as string)
21-
}
22-
if (all_permission[0] === permissions[0]) {
12+
if (permission.includes(value)) {
2313
return true
2414
}
25-
return (intersection(value, permissions) as string[]).length > 0
15+
return false
2616
}
2717
function hasPermi(el: Element, binding: DirectiveBinding) {
2818
const value = binding.value

‎src/locales/en.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,9 @@ export default {
162162
treeTable: 'Tree table',
163163
PicturePreview: 'Table Image Preview',
164164
department: 'Department management',
165-
menuManagement: 'Menu management'
165+
menuManagement: 'Menu management',
166+
// 权限测试页面
167+
permission: 'Permission test page'
166168
},
167169
permission: {
168170
hasPermission: 'Please set the operation permission value'

‎src/locales/zh-CN.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,8 @@ export default {
162162
treeTable: '树形表格',
163163
PicturePreview: '表格图片预览',
164164
department: '部门管理',
165-
menuManagement: '菜单管理'
165+
menuManagement: '菜单管理',
166+
permission: '权限测试页'
166167
},
167168
permission: {
168169
hasPermission: '请设置操作权限值'

‎src/router/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -548,6 +548,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
548548
meta: {
549549
title: t('router.role')
550550
}
551+
},
552+
{
553+
path: 'test',
554+
component: () => import('@/views/Authorization/Test/Test.vue'),
555+
name: 'Test',
556+
meta: {
557+
title: t('router.permission'),
558+
permission: ['add', 'edit', 'delete']
559+
}
551560
}
552561
]
553562
}

‎src/views/Authorization/Test/Test.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script setup lang="tsx">
2+
import { ContentWrap } from '@/components/ContentWrap'
3+
import { ref, unref } from 'vue'
4+
import { ElButton, ElDivider, ElRow, ElCol } from 'element-plus'
5+
import { hasPermi } from '@/components/Permission'
6+
7+
const permission = ref('add')
8+
9+
setTimeout(() => {
10+
permission.value = 'view'
11+
}, 3000)
12+
</script>
13+
14+
<template>
15+
<ContentWrap>
16+
<ElDivider>组件方式判断（已经全局注册，支持动态修改）</ElDivider>
17+
<ElRow :gutter="20">
18+
<ElCol :span="8">
19+
新增权限：
20+
<Permission permission="add">
21+
<ElButton type="primary"> Add </ElButton>
22+
</Permission>
23+
</ElCol>
24+
<ElCol :span="8">
25+
删除权限：
26+
<Permission permission="delete">
27+
<ElButton type="danger"> Delete </ElButton>
28+
</Permission>
29+
</ElCol>
30+
<ElCol :span="8">
31+
3秒后切换查看权限：
32+
<Permission :permission="permission">
33+
<ElButton type="primary"> View </ElButton>
34+
</Permission>
35+
</ElCol>
36+
</ElRow>
37+
38+
<ElDivider>指令方式判断（已经全局注册，不支持动态修改）</ElDivider>
39+
<ElRow :gutter="20">
40+
<ElCol :span="8">
41+
新增权限：
42+
<ElButton v-hasPermi="'add'" type="primary"> Add </ElButton>
43+
</ElCol>
44+
<ElCol :span="8">
45+
删除权限：
46+
<ElButton v-hasPermi="'delete'" type="danger"> Delete </ElButton>
47+
</ElCol>
48+
<ElCol :span="8">
49+
3秒后切换查看权限（无法动态修改）：
50+
<ElButton v-hasPermi="permission" type="primary"> View </ElButton>
51+
</ElCol>
52+
</ElRow>
53+
54+
<ElDivider>函数方式判断</ElDivider>
55+
<ElRow :gutter="20">
56+
<ElCol :span="8">
57+
新增权限：
58+
<ElButton v-if="hasPermi('add')" type="primary"> Add </ElButton>
59+
</ElCol>
60+
<ElCol :span="8">
61+
删除权限：
62+
<ElButton v-if="hasPermi('delete')" type="danger"> Delete </ElButton>
63+
</ElCol>
64+
<ElCol :span="8">
65+
3秒后切换查看权限：
66+
<ElButton v-if="hasPermi(unref(permission))" type="primary"> View </ElButton>
67+
</ElCol>
68+
</ElRow>
69+
</ContentWrap>
70+
</template>

‎types/components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
declare module 'vue' {
22
export interface GlobalComponents {
33
Icon: typeof import('../components/Icon/src/Icon.vue')['default']
4+
Permission: typeof import('../components/Permission/src/Permission.vue')['default']
45
}
56
}
67

0 commit comments

Comments
 (0)