feat(projects): mock添加权限过滤

src/composables/system.ts

@@ -1,4 +1,6 @@
 import UAParser from 'ua-parser-js';
+import { useAuthStore } from '@/store';
+import { isArray, isString } from '@/utils';
 
 interface AppInfo {
   /** 项目名称 */
@@ -26,3 +28,27 @@ export function useDeviceInfo() {
   const result = parser.getResult();
   return result;
 }
+
+/** 权限判断 */
+export function usePermission() {
+  const auth = useAuthStore();
+
+  function hasPermission(permission: Auth.RoleType | Auth.RoleType[]) {
+    const { userRole } = auth.userInfo;
+
+    let has = userRole === 'super';
+    if (!has) {
+      if (isArray(permission)) {
+        has = (permission as Auth.RoleType[]).includes(userRole);
+      }
+      if (isString(permission)) {
+        has = (permission as Auth.RoleType) === userRole;
+      }
+    }
+    return has;
+  }
+
+  return {
+    hasPermission
+  };
+}

src/directives/permission.ts

@@ -1,26 +1,24 @@
 import type { App, Directive } from 'vue';
-import { useAuthStore } from '@/store';
-import { isArray, isString } from '@/utils';
+import { usePermission } from '@/composables';
 
 export default function setupPermissionDirective(app: App) {
-  const auth = useAuthStore();
+  const { hasPermission } = usePermission();
+
+  function updateElVisible(el: HTMLElement, permission: Auth.RoleType | Auth.RoleType[]) {
+    if (!permission) {
+      throw new Error(`need roles: like v-permission="'admin'", v-permission="['admin', 'test]"`);
+    }
+    if (!hasPermission(permission)) {
+      el.parentElement?.removeChild(el);
+    }
+  }
 
   const permissionDirective: Directive<HTMLElement, Auth.RoleType | Auth.RoleType[]> = {
-    mounted(el: HTMLElement, binding) {
-      const { userRole } = auth.userInfo;
-      const elPermission = binding.value;
-      let hasPermission = userRole === 'super';
-      if (!hasPermission) {
-        if (isArray(elPermission)) {
-          hasPermission = (elPermission as Auth.RoleType[]).includes(userRole);
-        }
-        if (isString(elPermission)) {
-          hasPermission = (elPermission as Auth.RoleType) === userRole;
-        }
-      }
-      if (!hasPermission) {
-        el.remove();
-      }
+    mounted(el, binding) {
+      updateElVisible(el, binding.value);
+    },
+    beforeUpdate(el, binding) {
+      updateElVisible(el, binding.value);
     }
   };
 

src/router/modules/auth-demo.ts

@@ -8,7 +8,7 @@ const authDemo: AuthRoute.Route = {
       path: '/auth-demo/permission',
       component: 'self',
       meta: {
-        title: '指令和权限切换',
+        title: '权限切换',
         requiresAuth: true,
         icon: 'ic:round-construction'
       }

src/store/modules/tab/index.ts

@@ -53,7 +53,7 @@ export const useTabStore = defineStore('tab-store', {
     initHomeTab(routeHomeName: string, router: Router) {
       const routes = router.getRoutes();
       const findHome = routes.find(item => item.name === routeHomeName);
-      if (findHome && !findHome.children) {
+      if (findHome && !findHome.children.length) {
         // 有子路由的不能作为Tab
         this.homeTab = getTabRouteByVueRoute(findHome);
       }

src/views/auth-demo/permission/index.vue

@@ -1,17 +1,9 @@
 <template>
   <div class="h-full">
-    <n-card title="权限指令 v-permission" class="h-full shadow-sm rounded-16px">
+    <n-card title="权限切换" class="h-full shadow-sm rounded-16px">
       <div class="pb-12px">
         <n-gradient-text type="primary" :size="20">当前用户的权限：{{ auth.userInfo.userRole }}</n-gradient-text>
       </div>
-      <n-space>
-        <n-button v-permission="`super`">super可见</n-button>
-        <n-button v-permission="`admin`">admin可见</n-button>
-        <n-button v-permission="['admin', 'test']">admin和test可见</n-button>
-      </n-space>
-      <div class="py-12px">
-        <n-gradient-text type="primary" :size="20">切换用户权限</n-gradient-text>
-      </div>
       <n-select
         :value="auth.userInfo.userRole"
         class="w-120px"
@@ -19,6 +11,22 @@
         :options="roleList"
         @update:value="auth.updateUserRole"
       />
+      <div class="py-12px">
+        <n-gradient-text type="primary" :size="20">权限指令 v-permission</n-gradient-text>
+      </div>
+      <div>
+        <n-button v-permission="'super'" class="mr-12px">super可见</n-button>
+        <n-button v-permission="'admin'" class="mr-12px">admin可见</n-button>
+        <n-button v-permission="['admin', 'test']">admin和test可见</n-button>
+      </div>
+      <div class="py-12px">
+        <n-gradient-text type="primary" :size="20">权限函数 hasPermission</n-gradient-text>
+      </div>
+      <n-space>
+        <n-button v-if="hasPermission('super')">super可见</n-button>
+        <n-button v-if="hasPermission('admin')">admin可见</n-button>
+        <n-button v-if="hasPermission(['admin', 'test'])">admin和test可见</n-button>
+      </n-space>
     </n-card>
   </div>
 </template>
@@ -26,9 +34,11 @@
 <script setup lang="ts">
 import { watch } from 'vue';
 import { useAppStore, useAuthStore } from '@/store';
+import { usePermission } from '@/composables';
 
 const app = useAppStore();
 const auth = useAuthStore();
+const { hasPermission } = usePermission();
 
 const roleList = [
   { label: '超级管理员', value: 'super' },