!45 v-auth权限补充

Merge pull request !45 from yoyo/yoyo/add-auths

src/directives/auth.js

@@ -1,22 +1,18 @@
-import { permission } from '@/utils/permission'
+import { permissionAll } from '@/utils/permission'
+import tool from '@/utils/tool';
 
+/**
+ * 用户权限指令
+ * @directive 单个权限验证（v-auth="'xxx'"）
+ * @directive 多个权限验证，满足一个则显示（v-auths="['xxx','xxx']"）
+ * @directive 多个权限验证，全部满足则显示（v-auths-all="['xxx','xxx']"）
+ */
 export default {
-	mounted(el, binding) {
+	mounted (el, binding) {
-		const { value } = binding
+		if(permissionAll()){
-		if(Array.isArray(value)){
+			return
-			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);
-			}
 		}
+		let permissions = tool.data.get("PERMISSIONS");
+		if (!permissions.some((v) => v === binding.value)) el.parentNode.removeChild(el);
 	}
-};
+}

src/directives/auths.js

@@ -0,0 +1,24 @@
+import { permissionAll } from '@/utils/permission'
+import tool from '@/utils/tool';
+
+/**
+ * 用户权限指令
+ * @directive 单个权限验证（v-auth="'xxx'"）
+ * @directive 多个权限验证，满足一个则显示（v-auths="['xxx','xxx']"）
+ * @directive 多个权限验证，全部满足则显示（v-auths-all="['xxx','xxx']"）
+ */
+export default {
+	mounted (el, binding) {
+		if(permissionAll()){
+			return
+		}
+		let permissions = tool.data.get("PERMISSIONS");
+		let flag = false;
+		permissions.map((val) => {
+			binding.value.map((v) => {
+				if (val === v) flag = true;
+			});
+		});
+		if (!flag) el.parentNode.removeChild(el);
+	}
+}

src/directives/authsAll.js

@@ -0,0 +1,19 @@
+import { permissionAll, judementSameArr } from '@/utils/permission'
+import tool from '@/utils/tool';
+
+/**
+ * 用户权限指令
+ * @directive 单个权限验证（v-auth="'xxx'"）
+ * @directive 多个权限验证，满足一个则显示（v-auths="['xxx','xxx']"）
+ * @directive 多个权限验证，全部满足则显示（v-auths-all="['xxx','xxx']"）
+ */
+export default {
+	mounted (el, binding) {
+		if(permissionAll()){
+			return
+		}
+		let permissions = tool.data.get("PERMISSIONS");
+		const flag = judementSameArr(binding.value, permissions);
+		if (!flag) el.parentNode.removeChild(el);
+	}
+}

src/scui.js

@@ -24,6 +24,8 @@ import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
 
 import auth from './directives/auth'
+import auths from './directives/auths'
+import authsAll from './directives/authsAll'
 import role from './directives/role'
 import time from './directives/time'
 import copy from './directives/copy'
@@ -63,6 +65,8 @@ export default {
 
 		//注册全局指令
 		app.directive('auth', auth)
+		app.directive('auths', auths)
+		app.directive('auths-all', authsAll)
 		app.directive('role', role)
 		app.directive('time', time)
 		app.directive('copy', copy)

src/utils/permission.js

@@ -1,5 +1,37 @@
 import tool from '@/utils/tool';
 
+/**
+ * 是否含有不限分类，有则表示全部允许通过
+ */
+export function permissionAll() {
+	const allPermissions = "*/*/*"
+	let permissions = tool.data.get("PERMISSIONS");
+	return permissions.includes(allPermissions);
+}
+
+/**
+ * 比对两组数据是否一致
+ * @param news
+ * @param old
+ * @returns {boolean}
+ */
+export function judementSameArr(news, old) {
+	// console.log(news)
+	// console.log(old)
+	let count = 0;
+	const leng = news.length;
+	for (let i in news) {
+		for (let j in old) {
+			if (news[i] === old[j]) {
+				count++;
+				// console.log(news[i])
+			}
+		}
+	}
+	// console.log('相同的数量', count)
+	return count === leng;
+}
+
 export function permission(data) {
 	let permissions = tool.data.get("PERMISSIONS");
 	if(!permissions){

src/views/other/directive.vue

@@ -2,8 +2,12 @@
 	<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-button v-auths="['user.no','user.add']" type="primary">v-auths="['user.no','user.add']"</el-button>
-			<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 使用指令将减少代码冗余. 并且支持传入数组,有一项满足就判断有权限" style="margin-top: 20px;"></el-alert>
+			<el-button v-auths-all="['list.add','user.add']" type="primary">v-auths-all="['list.add','user.add']"</el-button>
+
+			<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 判断单项权限，如果满足就判断有权限" style="margin-top: 20px;"></el-alert>
+			<el-alert title="v-auths指令 传入数组,有一项满足就判断有权限" style="margin-top: 20px;"></el-alert>
+			<el-alert title="v-auths-all指令 传入数组,必须全满足才有权限，比如user.no没有这个权限，加到这里的话就表示不全部满足" style="margin-top: 20px;"></el-alert>
 		</el-card>
 		<el-card shadow="never" header="v-role 角色权限控制" style="margin-top: 15px;">
 			<el-button v-role="'admin'" type="primary">v-role="'admin'"</el-button>
@@ -34,20 +38,20 @@
 </template>
 
 <script>
-	export default {
+export default {
-		name: 'directive',
+	name: 'directive',
-		data() {
+	data() {
-			return {
+		return {
-				time1: new Date(),
+			time1: new Date(),
-				time2: new Date().setMinutes(new Date().getMinutes()-1),
+			time2: new Date().setMinutes(new Date().getMinutes()-1),
-				time3: new Date().setMinutes(new Date().getMinutes()-120),
+			time3: new Date().setMinutes(new Date().getMinutes()-120),
-				copyText: '测试复制内容'
+			copyText: '测试复制内容'
-			}
-		},
-		created() {
-
 		}
+	},
+	created() {
+
 	}
+}
 </script>
 
 <style>