增加指令 v-role

src/directives/auth.js

@@ -1,4 +1,4 @@
-import permission from '@/utils/permission'
+import { permission } from '@/utils/permission'
 
 export default {
 	mounted(el, binding) {

src/directives/role.js

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

src/main.js

@@ -10,7 +10,7 @@ import store from './store'
 import api from './api'
 import tool from './utils/tool'
 import http from "./utils/request"
-import permission from './utils/permission'
+import { permission, rolePermission } from './utils/permission'
 import errorHandler from './utils/errorHandler'
 import scTable from './components/scTable'
 import scFilterBar from './components/scFilterBar'
@@ -20,6 +20,7 @@ import scFormTable from './components/scFormTable'
 import scTableSelect from './components/scTableSelect'
 import scPageHeader from './components/scPageHeader'
 import auth from './directives/auth'
+import role from './directives/role'
 
 const app = createApp(App);
 
@@ -29,6 +30,7 @@ app.config.globalProperties.$TOOL = tool;
 app.config.globalProperties.$HTTP = http;
 app.config.globalProperties.$API = api;
 app.config.globalProperties.$AUTH = permission;
+app.config.globalProperties.$ROLE = rolePermission;
 
 app.use(store);
 app.use(router);
@@ -45,6 +47,7 @@ app.component('scPageHeader', scPageHeader);
 
 //注册全局指令
 app.directive('auth', auth)
+app.directive('role', role)
 
 //全局代码错误捕捉
 app.config.errorHandler = errorHandler

src/utils/permission.js

@@ -1,6 +1,6 @@
 import tool from '@/utils/tool';
 
-let permission = (data) => {
+export function permission(data) {
 	let userInfo = tool.data.get("user");
 	if(!userInfo){
 		return false;
@@ -12,4 +12,16 @@ let permission = (data) => {
 	let isHave = permissions.includes(data);
 	return isHave;
 }
-export default permission;
+
+export function rolePermission(data) {
+	let userInfo = tool.data.get("user");
+	if(!userInfo){
+		return false;
+	}
+	let role = userInfo.userInfo.role;
+	if(!role){
+		return false;
+	}
+	let isHave = role.includes(data);
+	return isHave;
+}

src/views/other/directive.vue

@@ -6,7 +6,12 @@
 			<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: 20px;"></el-alert>
 		</el-card>
-
+		<el-card shadow="never" style="margin-top: 15px;">
+			<h2 style="margin-bottom: 20px;">v-role 角色权限控制</h2>
+			<el-button v-role="'admin'" type="primary">v-role="'admin'"</el-button>
+			<el-button v-role="['SA','admin']" type="primary">v-role="['SA','admin']"</el-button>
+			<el-alert title="v-role指令 是$ROLE的语法糖, 原理是判断是否含有用户所在的角色别名" style="margin-top: 20px;"></el-alert>
+		</el-card>
 	</el-main>
 </template>