添加按钮权限指令

src/directives/permission.js

+import { unref } from 'vue';
+import { useAuthStore } from '@/stores/modules/auth';
+
+export default {
+  mounted(el, binding) {
+    const { value } = binding; // 获取指令的值，例如 v-permission="'create'"
+    const { authButtonListGet } = useAuthStore(); // 获取用户权限列表
+
+    // 如果 value 是数组，则检查是否包含所有权限
+    if (Array.isArray(value)) {
+      const hasPermission = value.every((perm) => authButtonListGet.includes(perm));
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    } else if (!authButtonListGet.includes(value)) {
+      el.parentNode && el.parentNode.removeChild(el); // 从 DOM 中移除元素
+    }
+  },
+};

src/plugins/directives.js

 import copy from '@/directives/copy';
 import debounce from '@/directives/debounce';
 import throttle from '@/directives/throttle';
+import permission from '@/directives/permission';
 
 export function setupDirectives(app) {
   // 复制指令
@@ -9,4 +10,6 @@ export function setupDirectives(app) {
   app.directive('debounce', debounce);
   // 节流指令
   app.directive('throttle', throttle);
+  // 权限指令
+  app.directive('permission', permission);
 }

src/stores/modules/auth.js

@@ -7,7 +7,7 @@ export const useAuthStore = defineStore({
   id: 'admin-auth',
   state: () => ({
     // 按钮权限列表
-    authButtonList: {},
+    authButtonList: [],
     // 菜单权限列表
     authMenuList: [],
     // 当前页面的 router name，用来做按钮权限筛选

src/views/system/accountManage/index.vue

@@ -2,10 +2,14 @@
   <div class="table-box">
     <ProTable ref="proTable" :config="config" :api="getUserPage">
       <template #left_buttons>
-        <el-button type="primary" :icon="Plus" @click="accountFormModalRef?.openModal()"
+        <el-button
+          v-permission="'AccountAdd'"
+          type="primary"
+          :icon="Plus"
+          @click="accountFormModalRef?.openModal()"
           >新增</el-button
         >
-        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
+        <el-button v-permission="'AccountDelete'" type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
       </template>
     </ProTable>