diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue index 27a56fcc..a4837f7e 100644 --- a/src/components/TreeSelect/index.vue +++ b/src/components/TreeSelect/index.vue @@ -128,7 +128,6 @@ function clearSelected() { } onMounted(() => { - console.log('hah', modelValue) initHandle() }) diff --git a/src/directive/index.ts b/src/directive/index.ts new file mode 100644 index 00000000..984b4016 --- /dev/null +++ b/src/directive/index.ts @@ -0,0 +1 @@ +export {hasPerm,hasRole} from "./permission"; \ No newline at end of file diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts new file mode 100644 index 00000000..fd9cef09 --- /dev/null +++ b/src/directive/permission/index.ts @@ -0,0 +1,53 @@ +import {useUserStoreHook} from "@/store/modules/user"; +import {Directive, DirectiveBinding} from "vue"; + +/** + * 按钮权限校验 + */ +export const hasPerm: Directive = { + mounted(el: HTMLElement, binding: DirectiveBinding) { + // 「超级管理员」拥有所有的按钮权限 + const roles = useUserStoreHook().roles; + if (roles.includes('ROOT')) { + return true + } + // 其他角色按钮权限校验 + const {value} = binding; + if (value) { + const requiredPerms = value; // DOM绑定需要的按钮权限标识 + + const hasPerm = useUserStoreHook().perms.some(perm => { + return requiredPerms.includes(perm) + }) + + if (!hasPerm) { + el.parentNode && el.parentNode.removeChild(el); + } + } else { + throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""); + } + } +}; + +/** + * 角色权限校验 + */ +export const hasRole: Directive = { + mounted(el: HTMLElement, binding: DirectiveBinding) { + const {value} = binding; + if (value) { + const requiredRoles = value; // DOM绑定需要的角色编码 + + const hasRole = useUserStoreHook().roles.some(perm => { + return requiredRoles.includes(perm) + }) + + if (!hasRole) { + el.parentNode && el.parentNode.removeChild(el); + } + } else { + throw new Error("need roles! Like v-has-role=\"['admin','test']\""); + } + } +}; + diff --git a/src/main.ts b/src/main.ts index fef06866..778e8ece 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import {createApp} from 'vue' +import {createApp, Directive} from 'vue' import App from './App.vue' import router from "./router"; import '@/styles/index.scss' @@ -8,20 +8,22 @@ import 'element-plus/theme-chalk/index.css' import locale from 'element-plus/lib/locale/lang/zh-cn' import 'virtual:svg-icons-register'; - // @see https://blog.csdn.net/qq_37213281/article/details/121422027 import * as ElIconModules from '@element-plus/icons' import '@/permission' - import Pagination from '@/components/Pagination/index.vue' import {listDictsByCode} from '@/api/system/dict' - const app = createApp(App) -// 统一注册el-icon图标 -// @link https://blog.csdn.net/Alloom/article/details/119415984 +// 自定义指令 +import * as directive from "@/directive"; +Object.keys(directive).forEach(key => { + app.directive(key, (directive as { [key: string]: Directive })[key]); +}); + +// 统一注册el-icon图标 https://blog.csdn.net/Alloom/article/details/119415984 for (let iconName in ElIconModules) { app.component(iconName, (ElIconModules as any)[iconName]) } diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue index 2d4389fe..ab71145f 100644 --- a/src/views/system/dept/index.vue +++ b/src/views/system/dept/index.vue @@ -163,16 +163,21 @@