feat: 调整权限逻辑，补充v-role指令

Author: sunss

src/components/Table/index.vue

@@ -43,6 +43,7 @@
           >
             <a @click.prevent="() => {}" :type="action.type">{{ action.label }}</a>
           </a-popconfirm>
+          <span v-else-if="!action.permission">——</span>
           <!-- 按钮 -->
           <a v-else @click="action?.onClick(record)" :type="action.type">{{ action.label }}</a>
           <!-- 分割线 -->
@@ -58,6 +59,7 @@
   import { usePagination } from 'vue-request';
   import { formatToDate, formatToDateTime } from '/@/utils/dateUtil';
   import { usePermission } from '/@/hooks/usePermission';
+  import { useRole } from '/@/hooks/useRole';
 
   // const req = () => new Promise((resolve) => resolve({ total: 0, list: [] }));
 
@@ -77,6 +79,7 @@
     // emits: ['onSearch'],
     setup(props) {
       const { hasPermission } = usePermission();
+      const { hasRole } = useRole();
       const {
         data: dataSource,
         run,
@@ -120,17 +123,20 @@
 
       // action 操作列
       const getActions = computed(() => {
-        return (toRaw(props.actions) || [])
-          .filter((action) => hasPermission(action.auth))
-          .map((action) => {
-            const { popConfirm } = action;
-            return {
-              type: 'link',
-              ...action,
-              ...(popConfirm || {}),
-              enable: !!popConfirm,
-            };
-          });
+        return (
+          (toRaw(props.actions) || [])
+            // .filter((action) => hasPermission(action.auth))
+            .map((action) => {
+              const { popConfirm } = action;
+              return {
+                type: 'link',
+                ...action,
+                ...(popConfirm || {}),
+                enable: !!popConfirm,
+                permission: hasPermission(action.auth) && hasRole(action.role),
+              };
+            })
+        );
       });
 
       // filter

src/components/TableFilter/index.vue

@@ -4,7 +4,10 @@
       <a-row type="flex">
         <a-col v-if="button" flex="100px">
           <span class="text" v-if="button.type === 'text'">{{ button.label }}</span>
-          <a-button v-else v-bind="button" v-auth="button.auth" @click="button?.onClick">{{
+          <!-- <a-button v-else v-bind="button" v-auth="button.auth" @click="button?.onClick">{{
+            button.label
+          }}</a-button> -->
+          <a-button v-if="getButton.permission" v-bind="button" @click="button?.onClick">{{
             button.label
           }}</a-button>
         </a-col>
@@ -47,11 +50,17 @@
   </a-card>
 </template>
 <script lang="ts">
+  import { usePermission } from '/@/hooks/usePermission';
+  import { useRole } from '/@/hooks/useRole';
+
   export default defineComponent({
     props: ['hiddenFilter', 'button', 'items', 'model'],
     emits: ['onSearch'],
 
     setup(props, { emit }) {
+      const { hasPermission } = usePermission();
+      const { hasRole } = useRole();
+
       const formModel = reactive(props.model || {});
 
       const getItems = computed(() => {
@@ -78,10 +87,19 @@
         }
       });
 
+      const getButton = computed(() => {
+        const plainObj = toRaw(props.button) || {};
+        return {
+          ...plainObj,
+          permission: hasPermission(plainObj.auth) && hasRole(plainObj.role),
+        };
+      });
+
       return {
         formModel,
         getItems,
         hasHidden,
+        getButton,
         handleSubmit,
       };
     },

src/directives/index.ts

@@ -3,7 +3,9 @@
  */
 import type { App } from 'vue';
 import { setupPermissionDirective } from './permission';
+import { setupRoleDirective } from './role';
 
 export function setupGlobDirectives(app: App) {
   setupPermissionDirective(app);
+  setupRoleDirective(app);
 }

src/directives/role.ts

@@ -0,0 +1,51 @@
+/**
+ * Global authority directive
+ * 角色控制： 银行 0 / 监管 1
+ * @Example v-role="role"
+ */
+import type { App, Directive, DirectiveBinding } from 'vue';
+import { useRole } from '/@/hooks/useRole';
+import intersection from 'lodash-es/intersection';
+
+// 操作按钮无权限时，替换展示内容
+function replaceHtml(parentNode: HTMLElement | null) {
+  if (!parentNode) return;
+
+  const child = document.createElement('span');
+  // 只过滤 Table里的操作按钮
+  const classNames = ['ant-space-item', 'ant-table-row-cell-break-word'];
+  const parentNodeText =
+    intersection(classNames, parentNode?.className?.split(' ')).length > 0 ? '——' : '';
+  // console.dir(parentNode);
+  child.innerHTML = parentNodeText;
+  child.style.color = 'rgba(0,0,0,.08)';
+  parentNode?.appendChild(child);
+}
+
+function isAuth(el: Element, binding: any) {
+  const { hasRole } = useRole();
+  const value = binding.value;
+  // 过滤 undefined、null
+  if (value == null) return;
+  // 权限验证
+
+  if (!hasRole(value)) {
+    const parentNode = el.parentNode;
+    el.parentNode?.removeChild(el);
+    replaceHtml(parentNode as any);
+  }
+}
+
+const mounted = (el: Element, binding: DirectiveBinding<any>) => {
+  isAuth(el, binding);
+};
+
+const authDirective: Directive = {
+  mounted,
+};
+
+export function setupRoleDirective(app: App) {
+  app.directive('role', authDirective);
+}
+
+export default authDirective;

src/hooks/useRole.ts

@@ -0,0 +1,27 @@
+/**
+ * @name useRole
+ * @description 处理角色权限
+ */
+
+import { usePermissioStore } from '/@/store/modules/permission';
+
+export function useRole() {
+  const permissioStore = usePermissioStore();
+
+  function hasRole(value?: string | string[], def = true): boolean {
+    if (value == null) {
+      return def;
+    }
+
+    if (typeof value === 'boolean') {
+      return value;
+    }
+
+    if (typeof value === 'number') {
+      return permissioStore.getRole === value;
+    }
+    return def;
+  }
+
+  return { hasRole };
+}

src/store/modules/permission.ts

@@ -10,6 +10,7 @@ interface PermissioState {
   isAdmin: 0 | 1; // 是否为管理员
   auths: string[]; // 当前用户权限
   modules: string[]; // 模块权限
+  role: 0 | 1;
 }
 
 export const usePermissioStore = defineStore({
@@ -23,11 +24,16 @@ export const usePermissioStore = defineStore({
     auths: [],
     // modules
     modules: [],
+    // role 0-银行 1-银保监
+    role: 0,
   }),
   getters: {
     getAuths(): string[] {
       return this.auths;
     },
+    getRole(): 0 | 1 {
+      return this.role;
+    },
     getModules(): string[] {
       return this.modules;
     },
@@ -52,6 +58,7 @@ export const usePermissioStore = defineStore({
       this.isAdmin = 0;
       this.auths = [];
       this.modules = [];
+      this.role = 0;
     },
 
     /**
@@ -88,6 +95,36 @@ export const usePermissioStore = defineStore({
 
       return routes;
     },
+
+    // /**
+    //  * @name buildRoutesAction
+    //  * @description: 获取路由
+    //  */
+    // buildRoutesAction(): RouteRecordRaw[] {
+    //   // this.isGetUserInfo = true;
+    //   this.setIsGetUserInfo(true);
+
+    //   // 404 路由一定要放在 权限路由后面
+    //   let routes: RouteRecordRaw[] = [...constantRoutes, ...accessRoutes, ...publicRoutes];
+
+    //   // 1. 角色权限过滤：0-银行 1-银保监
+    //   let filterRoutes = filterRouteByRole(cloneDeep(accessRoutes), this.role);
+    //   // let filterRoutes = routes;
+
+    //   // 2. 菜单权限过滤：
+    //   // 管理员直接跳过
+    //   if (this.getIsAdmin === 0) {
+    //     const filterRoutesByAuth = filterAsyncRoutes(cloneDeep(filterRoutes), this.modules);
+    //     filterRoutes = filterRoutesByAuth;
+    //   }
+
+    //   // 普通用户
+    //   // 1. 方案一：过滤每个路由模块涉及的接口权限，判断是否展示该路由
+    //   // 2. 方案二：直接检索接口权限列表是否包含该路由模块，不做细分，axios同一拦截
+    //   routes = [...constantRoutes, ...filterRoutes, ...publicRoutes];
+
+    //   return routes;
+    // },
   },
 });
 

src/utils/permission.ts

@@ -22,7 +22,7 @@ export const filterModuleByAuths = (auths: string[]): string[] => {
 // 不需要权限过滤的 白名单
 export const WhiteList = ['/v1/user/login', '/v1/user/permission', '/v1/account/info'];
 
-type IAuth = { auth?: string[] };
+type IAuth = { auth?: string[]; role?: number };
 
 export const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]): RouteRecordRaw[] => {
   const res: RouteRecordRaw[] = [];
@@ -44,3 +44,24 @@ export const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]): Ro
   });
   return res;
 };
+
+export const filterRouteByRole = (routes: RouteRecordRaw[], ROLE: number) => {
+  const filterChildrenByRole = (currentRoutes: RouteRecordRaw[]): RouteRecordRaw[] => {
+    const result: RouteRecordRaw[] = [];
+
+    currentRoutes.forEach((route) => {
+      const { role } = (route.meta as IAuth) || {};
+
+      if (role == undefined || role == ROLE) {
+        if (route.children) {
+          route.children = filterChildrenByRole(route.children);
+        }
+        result.push(route);
+      }
+    });
+
+    return result;
+  };
+
+  return filterChildrenByRole(routes);
+};