完善按钮权限的绑定，控制按钮的显示隐藏，在菜单里配置按钮权限，通过v-auth 或 v-auths 或 v-auth-all 进行绑定，例子在用户管理页面

src/router/backEnd.ts

@@ -92,6 +92,8 @@ export function backEndComponent(routes: any) {
 			isLink: item.linkUrl || item.isLink,
 			linkUrl: item.linkUrl,
 			title: item.title,
+			buttons: (item.button || []).map((item: any) => item.types),
+			columns: (item.column || []).map((item: any) => item.code),
 		}
 		return item;
 	});

src/utils/arrayOperation.ts

@@ -1,4 +1,13 @@
 /**
+ * 判断子数据数组是否走在总数据里
+ * @param big 总数据
+ * @param small 子数据
+ * @returns 总数据包含子数据 `true`，反之则反
+ */
+export function smallInBig(big: string[], small: string[]): boolean {
+	return small.every(i => big.includes(i))
+}
+/**
  * 判断两数组是否相同
  * @param news 新数据
  * @param old 源数据

src/utils/authDirective.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue';
-import { store } from '/@/store/index.ts';
-import { judementSameArr } from '/@/utils/arrayOperation';
+import { smallInBig } from '/@/utils/arrayOperation';
+// import { useRoute } from 'vue-router';
+import router from '../router';
 
 /**
  * 用户权限指令
@@ -13,16 +14,18 @@ export function authDirective(app: App) {
 	// 单个权限验证（v-auth="xxx"）
 	app.directive('auth', {
 		mounted(el, binding) {
-			if (store.state.userInfos.permissions.includes(allPermissions)) return
-			if (!store.state.userInfos.permissions.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
+			const buttons = <string[]>router.currentRoute.value.meta.buttons
+			if (buttons.includes(allPermissions)) return
+			if (!buttons.includes(binding.value)) el.parentNode.removeChild(el)
 		},
 	});
 	// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
 	app.directive('auths', {
 		mounted(el, binding) {
-			if (store.state.userInfos.permissions.includes(allPermissions)) return
+			const buttons = <string[]>router.currentRoute.value.meta.buttons
+			if (buttons.includes(allPermissions)) return
 			let flag = false;
-			store.state.userInfos.permissions.map((val: string) => {
+			buttons.map((val: string) => {
 				binding.value.map((v: string) => {
 					if (val === v) flag = true;
 				});
@@ -33,9 +36,9 @@ export function authDirective(app: App) {
 	// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
 	app.directive('auth-all', {
 		mounted(el, binding) {
-			if (store.state.userInfos.permissions.includes(allPermissions)) return
-			const flag = judementSameArr(binding.value, store.state.userInfos.permissions);
-			if (!flag) el.parentNode.removeChild(el);
+			const buttons = <string[]>router.currentRoute.value.meta.buttons
+			if (buttons.includes(allPermissions)) return
+			!smallInBig(buttons, binding.value) && el.parentNode.removeChild(el)
 		},
 	});
 }

src/views/system/dept/index.vue

@@ -41,7 +41,7 @@
         <el-table-column prop="createdAt" label="创建时间" align="center" min-width="180"></el-table-column>
         <el-table-column label="操作" align="center" width="140">
           <template #default="scope">
-            <el-button size="small" type="text" @click="onOpenAddDept(scope.row)">新增</el-button>
+            <el-button size="small" type="text" @click="onOpenAddDept(scope.row)" v-auth="'edit'">新增</el-button>
             <el-button size="small" text type="warning" @click="onOpenEditDept(scope.row)">修改</el-button>
             <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">删除</el-button>
           </template>

src/views/system/user/index.vue

@@ -43,7 +43,7 @@
                   </el-icon>
                   重置
                 </el-button>
-                <el-button size="default" type="success" class="ml10" @click="onOpenAddUser">
+                <el-button size="default" type="success" class="ml10" @click="onOpenAddUser"  v-auth="'add'">
                   <el-icon>
                     <ele-FolderAdd />
                   </el-icon>
@@ -76,9 +76,11 @@
             <el-table-column prop="createdAt" label="创建时间" width="180" align="center"></el-table-column>
             <el-table-column label="操作" width="150" align="center" fixed="right">
               <template #default="scope">
-                <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)">修改</el-button>
-                <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="scope.row.id!==1">删除</el-button>
-                <el-button size="small" text type="success" @click="handleResetPwd(scope.row)">重置</el-button>
+                <!-- <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auths="['edit','del']">修改</el-button>
+                <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth-all="['edit','del']">修改</el-button> -->
+                <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth="'edit'">修改</el-button>
+                <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="scope.row.id!==1" v-auth="'del'">删除</el-button>
+                <el-button size="small" text type="success" @click="handleResetPwd(scope.row)"  v-auth="'reset'">重置</el-button>
               </template>
             </el-table-column>
           </el-table>