github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 11:34:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

重构鉴权指令、鉴权组件

Browse Source
This commit is contained in:
Hooray
2024-10-08 15:18:20 +08:00
parent 18242685bc
commit e662e9a095
5 changed files with 52 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Auth/index.vue
+8 -5
View File
@@ -5,16 +5,19 @@ defineOptions({
const props = defineProps<{
value: string | string[]
all?: boolean
}>()
const auth = useAuth()
function check() {
return useAuth().auth(props.value)
return props.all
? auth.authAll(typeof props.value === 'string' ? [props.value] : props.value)
: auth.auth(props.value)
}
</script>
<template>
<div>
<slot v-if="check()" />
<slot v-else name="no-auth" />
</div>
<slot v-if="check()" />
<slot v-else name="no-auth" />
</template>
src/components/AuthAll/index.vue
-20
View File
@@ -1,20 +0,0 @@
<script setup lang="ts">
defineOptions({
name: 'AuthAll',
})
const props = defineProps<{
value: string[]
}>()
function check() {
return useAuth().authAll(props.value)
}
</script>
<template>
<div>
<slot v-if="check()" />
<slot v-else name="no-auth" />
</div>
</template>
src/types/components.d.ts
Vendored
-1
View File
@@ -8,7 +8,6 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
Auth: typeof import('./../components/Auth/index.vue')['default']
AuthAll: typeof import('./../components/AuthAll/index.vue')['default']
FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
FixedActionBar: typeof import('./../components/FixedActionBar/index.vue')['default']
HButton: typeof import('./../layouts/ui-kit/HButton.vue')['default']
src/utils/directive.ts
+8 -15
View File
@@ -1,19 +1,12 @@
import type { App } from 'vue'
import type { App, DirectiveBinding } from 'vue'
export default function directive(app: App) {
// 注册 v-auth 和 v-auth-all 指令
app.directive('auth', {
mounted: (el, binding) => {
if (!useAuth().auth(binding.value)) {
el.remove()
}
},
})
app.directive('auth-all', {
mounted: (el, binding) => {
if (!useAuth().authAll(binding.value)) {
el.remove()
}
},
app.directive('auth', (el: HTMLElement, binding: DirectiveBinding) => {
if (binding.modifiers.all ? useAuth().authAll(binding.value) : useAuth().auth(binding.value)) {
el.style.display = ''
}
else {
el.style.display = 'none'
}
})
}
src/views/permission_example/index.vue
+36 -38
View File
@@ -14,7 +14,6 @@ const settingsStore = useSettingsStore()
const userStore = useUserStore()
const { auth, authAll } = useAuth()
const mainPage = useMainPage()
// 模拟账号切换
async function accountChange(val: any) {
@@ -23,7 +22,6 @@ async function accountChange(val: any) {
password: '',
})
await userStore.getPermissions()
mainPage.reload()
}
function goTest() {
router.push({
@@ -76,41 +74,6 @@ function permissionCheck2(permissions: string[]) {
点击访问
</ElButton>
</div>
<h3>鉴权组件（请对照代码查看）</h3>
<div>
<Auth value="permission.browse" style="margin-bottom: 10px;">
<ElTag>你有 permission.browse 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.browse 权限
</ElTag>
</template>
</Auth>
<Auth value="permission.create" style="margin-bottom: 10px;">
<ElTag>你有 permission.create 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.create 权限
</ElTag>
</template>
</Auth>
<Auth :value="['permission.browse', 'permission.create']" style="margin-bottom: 10px;">
<ElTag>你有 permission.browse 或 permission.create 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.browse 或 permission.create 权限
</ElTag>
</template>
</Auth>
<AuthAll :value="['permission.browse', 'permission.create']">
<ElTag>你有 permission.browse 和 permission.create 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.browse 和 permission.create 权限
</ElTag>
</template>
</AuthAll>
</div>
<h3>鉴权指令（请对照代码查看）</h3>
<div>
<div v-auth="'permission.browse'">
@@ -122,10 +85,45 @@ function permissionCheck2(permissions: string[]) {
<div v-auth="['permission.browse', 'permission.create']">
如果你有 permission.browse 或 permission.create 权限则能看到这句话
</div>
<div v-auth-all="['permission.browse', 'permission.create']">
<div v-auth.all="['permission.browse', 'permission.create']">
如果你有 permission.browse 和 permission.create 权限则能看到这句话
</div>
</div>
<h3>鉴权组件（请对照代码查看）</h3>
<div class="flex-col-start gap-2">
<Auth value="permission.browse">
<ElTag>你有 permission.browse 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.browse 权限
</ElTag>
</template>
</Auth>
<Auth value="permission.create">
<ElTag>你有 permission.create 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.create 权限
</ElTag>
</template>
</Auth>
<Auth :value="['permission.browse', 'permission.create']">
<ElTag>你有 permission.browse 或 permission.create 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.browse 或 permission.create 权限
</ElTag>
</template>
</Auth>
<Auth :value="['permission.browse', 'permission.create']" all>
<ElTag>你有 permission.browse 和 permission.create 权限</ElTag>
<template #no-auth>
<ElTag type="danger">
你没有 permission.browse 和 permission.create 权限
</ElTag>
</template>
</Auth>
</div>
<h3>鉴权函数（请对照代码查看）</h3>
<div>
<ElButtonGroup style="display: block; margin-bottom: 10px;">