🎈 perf: 暂存

src/components/app/HeaderMenu.vue

@@ -7,12 +7,12 @@
     @select="$emit('select')"
   >
     <el-menu-item index="/">首页</el-menu-item>
-    <el-menu-item v-if="isValid('/club')" index="/club">社团</el-menu-item>
+    <el-menu-item v-if="userStore.hasRoutePermission('/club')" index="/club">社团</el-menu-item>
     <el-sub-menu class="festival-menu" index="festival">
       <template #title>社团文化节</template>
       <template v-for="{ imgURL, title, to } of festivalMenuItems">
         <festival-menu-item
-          v-if="isValid(to)"
+          v-if="userStore.hasRoutePermission(to)"
           :key="to.fullPath"
           :imgURL="imgURL"
           :title="title"
@@ -20,7 +20,7 @@
         />
       </template>
     </el-sub-menu>
-    <el-menu-item v-if="isValid('/manage')" index="/manage">管理</el-menu-item>
+    <el-menu-item v-if="userStore.hasRoutePermission('/manage')" index="/manage">管理</el-menu-item>
   </el-menu>
 </template>
 <style lang="scss" scoped>
@@ -64,19 +64,6 @@ const festivalMenuItems = reactive<MenuItem[]>([
     to: router.resolve('/gobang'),
   },
 ]);
-function isValid(to: string | RouteLocationGeneric) {
-  if (typeof to === 'string') {
-    to = router.resolve(to);
-  }
-  const {
-    meta: { shouldLogin, userPermissionId, clubPermissionId },
-  } = to;
-  return (
-    (!shouldLogin || userStore.logined) &&
-    userStore.hasUserPermissions(userPermissionId) &&
-    userStore.hasClubPermissions(clubPermissionId)
-  );
-}
 defineProps<{
   mode: 'horizontal' | 'vertical';
 }>();

src/router/index.ts

@@ -123,8 +123,8 @@ router.beforeEach(async (to) => {
     return pageStore.createTempErrorRoute({ type: PageErrorType.NOT_LOGIN }, to);
   }
   if (
-    !userStore.hasUserPermissions(userPermissionId) ||
-    !userStore.hasClubPermissions(clubPermissionId)
+    !userStore.hasUserPermission(userPermissionId) ||
+    !userStore.hasClubPermission(clubPermissionId)
   )
     return pageStore.createTempErrorRoute({ type: PageErrorType.NO_PERMISSION }, to);
   return true;

src/stores/user.ts

@@ -9,7 +9,7 @@ import { ElMessage } from 'element-plus';
 import { isEqual } from 'lodash-es';
 import { defineStore } from 'pinia';
 import { computed, ref, watch } from 'vue';
-import type { RouteMeta } from 'vue-router';
+import type { RouteLocationGeneric, RouteMeta } from 'vue-router';
 import { z } from 'zod';
 
 type Permission = z.infer<typeof idAndNameSchema>;
@@ -26,7 +26,7 @@ export const useUserStore = defineStore('user', () => {
         (userInfo.value?.auth.permissions ?? []).map((permission) => [permission.id, permission]),
       ),
   );
-  const hasUserPermissions = (userPermissionId: RouteMeta['userPermissionId']) =>
+  const hasUserPermission = (userPermissionId: RouteMeta['userPermissionId']) =>
     !userPermissionId || ensureArray(userPermissionId).every((id) => userPermissions.value.has(id));
   const clubPermissions = computed(
     () =>
@@ -37,8 +37,21 @@ export const useUserStore = defineStore('user', () => {
         ]),
       ),
   );
-  const hasClubPermissions = (clubPermissionId: RouteMeta['clubPermissionId']) =>
+  const hasClubPermission = (clubPermissionId: RouteMeta['clubPermissionId']) =>
     !clubPermissionId || ensureArray(clubPermissionId).every((id) => clubPermissions.value.has(id));
+  function hasRoutePermission(to: string | RouteLocationGeneric) {
+    if (typeof to === 'string') {
+      to = router.resolve(to);
+    }
+    const {
+      meta: { shouldLogin, userPermissionId, clubPermissionId },
+    } = to;
+    return (
+      (!shouldLogin || logined.value) &&
+      hasUserPermission(userPermissionId) &&
+      hasClubPermission(clubPermissionId)
+    );
+  }
   const initializing = ref(false);
   const logined = computed(() => (userInfo.value && userInfo.value.id !== -1) ?? false);
   watch(
@@ -85,9 +98,10 @@ export const useUserStore = defineStore('user', () => {
     userInfo,
     logined,
     userPermissions,
-    hasUserPermissions,
+    hasUserPermission,
     clubPermissions,
-    hasClubPermissions,
+    hasClubPermission,
+    hasRoutePermission,
     initializing,
     isSelf,
     updateSelfUserInfo,

src/views/manage/ManagePage.vue

@@ -2,11 +2,12 @@
   <el-main>
     <el-container>
       <el-aside class="manage-page-aside">
-        <el-menu></el-menu>
+        <el-menu>
+          <el-menu-item></el-menu-item>
+        </el-menu>
       </el-aside>
       <el-main></el-main>
     </el-container>
   </el-main>
 </template>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>