自定义一个权限指令来动态显示、隐藏， 详细代码可查看sable。这里只列出了主要的代码
自定义权限指令
permission.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| import type { App } from "vue"
import { ref, watchEffect } from "vue"
import { storeToRefs } from "pinia"
import { usePermissionStore } from "@/store/usePermissionStore.ts"
export function registerPermission(app: App) {
const { permissions } = storeToRefs(usePermissionStore())
app.directive("permission", {
created(el: HTMLButtonElement, binding) {
const { value } = binding
const buttonPermission = Array.isArray(value) ? value : [value]
const visible = ref(false)
watchEffect(() => {
visible.value = hasIntersection(permissions, buttonPermission)
el.style.display = visible.value ? "" : "none"
})
},
})
}
function hasIntersection(permissions: Ref<string[]>, arr2: string[]) {
const map = new Map()
permissions.value.forEach((item) => map.set(item, true))
return arr2.some((item) => map.get(item))
}
|
权限 store
usePermissionStore.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { defineStore } from "pinia"
export const usePermissionStore = defineStore("permission", {
state: () => ({
permissions: [],
}),
getters: {},
actions: {
setPermissions(permissions: string[]) {
this.permissions = permissions
},
},
})
|
使用
permission.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <script lang="ts" setup>
import { storeToRefs } from "pinia"
const userPermissionStore = usePermissionStore()
const { setPermissions } = userPermissionStore
const { permissions } = storeToRefs(userPermissionStore)
</script>
<template>
<div>
自定义指令
<n-divider title-placement="left"> 根据权限列表来展示 </n-divider>
<div>
<n-space>
<n-button @click="setPermissions(['read'])"> 设置为只有阅读权限 </n-button>
<n-button @click="setPermissions(['read', 'write'])"> 设置为阅读和修改权限 </n-button>
</n-space>
</div>
<div mt-4>
权限列表： {{ permissions }}
<n-button v-permission="'read'"> 阅读 </n-button>
<n-button v-permission="'write'"> 写入 </n-button>
</div>
</div>
</template>
<style></style>
|
效果
