From 7c8326c7c5e9a2fc5314c20d81016065779c6b4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 23 Jan 2022 18:03:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(directive):=20=E6=B7=BB=E5=8A=A0=E8=87=AA?=
=?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=8C=87=E4=BB=A4directive=E5=AE=9E=E7=8E=B0?=
=?UTF-8?q?=E6=8C=89=E9=92=AE=E6=9D=83=E9=99=90=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/TreeSelect/index.vue | 1 -
src/directive/index.ts | 1 +
src/directive/permission/index.ts | 53 +++++++++
src/main.ts | 14 +--
src/views/system/dept/index.vue | 9 +-
src/views/system/user/index.vue | 162 +++++++++++++---------------
6 files changed, 144 insertions(+), 96 deletions(-)
create mode 100644 src/directive/index.ts
create mode 100644 src/directive/permission/index.ts
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 @@