Support async permission checks in route menu generator (#7688)

#### What type of PR is this?

/area ui
/kind feature
/milestone 2.21.x

#### What this PR does / why we need it:

Support async permission checks in route menu generator

example:

```ts
{
  path: "",
  name: "Foo",
  component: Foo,
  meta: {
    title: "Foo",
    searchable: true,
    permissions: async () => {
      const { data } = await checkPermission();
      return data;
    },
    menu: {
      name: "Foo",
      group: "content",
      icon: markRaw(MingcuteBook2Line),
      priority: 4,
      mobile: false,
    },
  },
}
```

#### Which issue(s) this PR fixes:

Fixes #

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
开发者相关:路由的权限检查支持函数
```
This commit is contained in:
Ryan Wang
2025-08-17 23:43:10 +08:00
committed by GitHub
parent e6f8783389
commit 3f5b69d5d0
6 changed files with 258 additions and 141 deletions

View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import GlobalSearchModal from "@/components/global-search/GlobalSearchModal.vue";
import MenuLoading from "@/components/menu/MenuLoading.vue";
import { RoutesMenu } from "@/components/menu/RoutesMenu";
import { useRouteMenuGenerator } from "@/composables/use-route-menu-generator";
import MobileMenu from "@/layouts/MobileMenu.vue";
@@ -29,7 +30,7 @@ useEventListener(document, "keydown", (e: KeyboardEvent) => {
}
});
const { menus, minimenus } = useRouteMenuGenerator(coreMenuGroups);
const { data, isLoading } = useRouteMenuGenerator(coreMenuGroups);
// aside scroll
const navbarScroller = ref();
@@ -95,7 +96,8 @@ onMounted(() => {
</div>
</div>
</div>
<RoutesMenu :menus="menus" />
<MenuLoading v-if="isLoading" />
<RoutesMenu v-else :menus="data?.menus || []" />
</div>
<div class="sidebar__profile">
<UserProfileBanner platform="console" />
@@ -112,7 +114,11 @@ onMounted(() => {
</RouterLink>
</footer>
</main>
<MobileMenu :menus="menus" :minimenus="minimenus" platform="console" />
<MobileMenu
:menus="data?.menus || []"
:minimenus="data?.minimenus || []"
platform="console"
/>
</div>
<GlobalSearchModal
v-if="globalSearchVisible"