|
@@ -1,33 +1,92 @@
|
|
|
-import {usePermission} from '@/hooks/permission'
|
|
|
-import { watchEffect } from 'vue';
|
|
|
-
|
|
|
-const {authCodeOpts} =usePermission()
|
|
|
-
|
|
|
-function checkPermission(el,binding) {
|
|
|
- let {value} = binding
|
|
|
- if(value && typeof(value)=='string'){
|
|
|
- // 使用watchEffect来监听authList的变化
|
|
|
- watchEffect(() => {
|
|
|
- // 如果authList还未获取到,则直接返回
|
|
|
- if (!authCodeOpts.value) return;
|
|
|
-
|
|
|
- // 拿出所有按钮的code
|
|
|
- let buttonCodes = authCodeOpts.value
|
|
|
- if (!buttonCodes.includes(value)) {
|
|
|
- // 没有权限,删除dom
|
|
|
- el.parentNode && el.parentNode.removeChild(el);
|
|
|
- }
|
|
|
- });
|
|
|
- }else{
|
|
|
- throw new Error('permission指令只接受字符串类型')
|
|
|
+// import {usePermission} from '@/hooks/permission'
|
|
|
+// import { watchEffect } from 'vue';
|
|
|
+
|
|
|
+// const {authCodeOpts} =usePermission()
|
|
|
+
|
|
|
+// function checkPermission(el,binding) {
|
|
|
+// let {value} = binding
|
|
|
+// if(value && typeof(value)=='string'){
|
|
|
+// // 使用watchEffect来监听authList的变化
|
|
|
+// watchEffect(() => {
|
|
|
+// // 如果authList还未获取到,则直接返回
|
|
|
+// if (!authCodeOpts.value) return;
|
|
|
+
|
|
|
+// // 拿出所有按钮的code
|
|
|
+// let buttonCodes = authCodeOpts.value
|
|
|
+// if (!buttonCodes.includes(value)) {
|
|
|
+// // 没有权限,删除dom
|
|
|
+// el.parentNode && el.parentNode.removeChild(el);
|
|
|
+// }
|
|
|
+// });
|
|
|
+// }else{
|
|
|
+// throw new Error('permission指令只接受字符串类型')
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// export const permission={
|
|
|
+// inserted(el,binding){
|
|
|
+// checkPermission(el,binding)
|
|
|
+// },
|
|
|
+// updated(el,binding) {
|
|
|
+// checkPermission(el,binding)
|
|
|
+// },
|
|
|
+// }
|
|
|
+
|
|
|
+import { usePermission } from '@/hooks/permission';
|
|
|
+import { watch } from 'vue';
|
|
|
+
|
|
|
+const { authCodeOpts } = usePermission();
|
|
|
+
|
|
|
+function checkPermission(el, binding, vnode) {
|
|
|
+ let { value } = binding;
|
|
|
+ if (value && typeof value === 'string') {
|
|
|
+ // 创建一个占位元素,用于在权限重新赋予时插入按钮
|
|
|
+ const placeholder = document.createComment(' ');
|
|
|
+ el._placeholder = placeholder;
|
|
|
+
|
|
|
+ // 使用 watch 来监听 authCodeOpts 的变化
|
|
|
+ const stop = watch(
|
|
|
+ () => authCodeOpts.value,
|
|
|
+ (newVal) => {
|
|
|
+ // 如果 authCodeOpts 还未获取到,则直接返回
|
|
|
+ if (!newVal) return;
|
|
|
+
|
|
|
+ // 拿出所有按钮的 code
|
|
|
+ let buttonCodes = newVal;
|
|
|
+ if (!buttonCodes.includes(value)) {
|
|
|
+ // 没有权限,删除 DOM 并保留占位
|
|
|
+ if (el.parentNode) {
|
|
|
+ el.parentNode.replaceChild(placeholder, el);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 有权限,恢复按钮
|
|
|
+ if (placeholder.parentNode) {
|
|
|
+ placeholder.parentNode.replaceChild(el, placeholder);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 将 stop 作为元素的属性存储,以便在指令 unmounted 时可以停止监听
|
|
|
+ el._stop = stop;
|
|
|
+ } else {
|
|
|
+ throw new Error('permission 指令只接受字符串类型');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export const permission={
|
|
|
- inserted(el,binding){
|
|
|
- checkPermission(el,binding)
|
|
|
+export const permission = {
|
|
|
+ mounted(el, binding, vnode) {
|
|
|
+ checkPermission(el, binding, vnode);
|
|
|
+ },
|
|
|
+ updated(el, binding, vnode) {
|
|
|
+ checkPermission(el, binding, vnode);
|
|
|
},
|
|
|
- updated(el,binding) {
|
|
|
- checkPermission(el,binding)
|
|
|
+ unmounted(el) {
|
|
|
+ // 组件卸载时停止监听
|
|
|
+ if (el._stop) {
|
|
|
+ el._stop();
|
|
|
+ delete el._stop;
|
|
|
+ }
|
|
|
},
|
|
|
-}
|
|
|
+};
|