ADD v-auth 指令

src/directives/auth.js

@@ -0,0 +1,22 @@
+import permission from '@/utils/permission'
+
+export default {
+	mounted(el, binding) {
+		const { value } = binding
+		if(Array.isArray(value)){
+			let ishas = false;
+			value.forEach(item => {
+				if(permission(item)){
+					ishas = true;
+				}
+			})
+			if (!ishas){
+				el.parentNode.removeChild(el)
+			}
+		}else{
+			if(!permission(value)){
+				el.parentNode.removeChild(el);
+			}
+		}
+	}
+};

src/main.js

@@ -17,6 +17,7 @@ import scUpload from './components/scUpload'
 import scUploadMultiple from './components/scUpload/multiple'
 import scFormTable from './components/scFormTable'
 import scTableSelect from './components/scTableSelect'
+import auth from './directives/auth'
 
 const app = createApp(App);
 
@@ -24,7 +25,7 @@ app.config.globalProperties.$CONFIG = config;
 app.config.globalProperties.$TOOL = tool;
 app.config.globalProperties.$HTTP = http;
 app.config.globalProperties.$API = api;
-app.config.globalProperties.$HAS = permission;
+app.config.globalProperties.$AUTH = permission;
 
 app.use(store);
 app.use(router);
@@ -37,4 +38,6 @@ app.component('scUploadMultiple', scUploadMultiple);
 app.component('scFormTable', scFormTable);
 app.component('scTableSelect', scTableSelect);
 
+app.directive('auth', auth)
+
 app.mount('#app');

src/views/other/directive.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-main>
+		<el-card shadow="never" header="v-auth">
+			<el-button v-auth="'user.add'" type="primary">v-auth="'user.add'"</el-button>
+			<el-button v-auth="['user.no','user.add']" type="primary">v-auth="['user.no','user.add']"</el-button>
+			<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 使用指令将减少代码冗余. 并且支持传入数组,有一项满足就判断有权限" style="margin-top: 15px;"></el-alert>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/userCenter/index.vue

@@ -32,12 +32,12 @@
 							</el-space>
 							<h2>当前账号权限</h2>
 							<el-space wrap>
-								<el-tag v-if="$HAS('user.add')">user.add</el-tag>
-								<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
-								<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
-								<el-tag v-if="$HAS('list.add')">list.add</el-tag>
-								<el-tag v-if="$HAS('list.edit')">list.edit</el-tag>
-								<el-tag v-if="$HAS('list.delete')">list.delete</el-tag>
+								<el-tag v-if="$AUTH('user.add')">user.add</el-tag>
+								<el-tag v-if="$AUTH('user.edit')">user.edit</el-tag>
+								<el-tag v-if="$AUTH('user.delete')">user.delete</el-tag>
+								<el-tag v-if="$AUTH('list.add')">list.add</el-tag>
+								<el-tag v-if="$AUTH('list.edit')">list.edit</el-tag>
+								<el-tag v-if="$AUTH('list.delete')">list.delete</el-tag>
 							</el-space>
 						</div>
 					</div>