perf: 优化获取权限逻辑

Author: nineaiyu

src/api/routes.ts

@@ -3,6 +3,7 @@ import { http } from "@/utils/http";
 type Result = {
   success: boolean;
   data: Array<any>;
+  auths: Array<any>;
 };
 
 export const getAsyncRoutes = () => {

src/components/RePlusCRUD/src/components/wangEditor.vue

@@ -7,7 +7,7 @@ import { message } from "@/utils/message";
 import { formatBytes, getKeyList } from "@pureadmin/utils";
 import { useI18n } from "vue-i18n";
 import { IEditorConfig } from "@wangeditor/editor";
-import { hasAuth, hasGlobalAuth } from "@/router/utils";
+import { hasAuth } from "@/router/utils";
 
 const messages = defineModel<string | object | any>();
 const editorRef = shallowRef();
@@ -62,10 +62,7 @@ const editorConfig: Partial<IEditorConfig> = {
     attachment: { menuKeys: [] }
   }
 };
-if (
-  hasGlobalAuth("config:systemUploadFile") &&
-  hasGlobalAuth("upload:systemUploadFile")
-) {
+if (hasAuth("config:systemUploadFile") && hasAuth("upload:systemUploadFile")) {
   toolbarConfig.insertKeys.keys = ["uploadAttachment"]; // “上传附件”菜单
   editorConfig.hoverbarKeys.attachment = {
     menuKeys: ["downloadAttachment"] // “下载附件”菜单

src/directives/auth/index.ts

@@ -2,7 +2,7 @@ import { hasAuth } from "@/router/utils";
 import type { Directive, DirectiveBinding } from "vue";
 
 export const auth: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
     const { value } = binding;
     if (value) {
       if (!hasAuth(value)) {

src/router/utils.ts

@@ -12,8 +12,6 @@ import {
   cloneDeep,
   intersection,
   isAllEmpty,
-  isIncludeAllChildren,
-  isString,
   storageLocal
 } from "@pureadmin/utils";
 import { getConfig } from "@/config";
@@ -152,7 +150,8 @@ function addPathMatch() {
 }
 
 /** 处理动态路由（后端返回的路由） */
-function handleAsyncRoutes(routeList) {
+function handleAsyncRoutes(routeList, authList) {
+  usePermissionStoreHook().handleWholeAuths(authList);
   if (routeList.length === 0) {
     usePermissionStoreHook().handleWholeMenus(routeList);
   } else {
@@ -203,25 +202,28 @@ function initRouter() {
   if (getConfig()?.CachingAsyncRoutes) {
     // 开启动态路由缓存本地localStorage
     const key = "async-routes";
+    const authKey = "async-auths";
     const asyncRouteList = storageLocal().getItem(key) as any;
+    const asyncAuthList = storageLocal().getItem(authKey) as any;
     if (asyncRouteList && asyncRouteList?.length > 0) {
       return new Promise(resolve => {
-        handleAsyncRoutes(asyncRouteList);
+        handleAsyncRoutes(asyncRouteList, asyncAuthList);
         resolve(router);
       });
     } else {
       return new Promise(resolve => {
-        getAsyncRoutes().then(({ data }) => {
-          handleAsyncRoutes(cloneDeep(data));
+        getAsyncRoutes().then(({ data, auths }) => {
+          handleAsyncRoutes(cloneDeep(data), auths);
           storageLocal().setItem(key, data);
+          storageLocal().setItem(authKey, auths);
           resolve(router);
         });
       });
     }
   } else {
     return new Promise(resolve => {
-      getAsyncRoutes().then(({ data }) => {
-        handleAsyncRoutes(cloneDeep(data));
+      getAsyncRoutes().then(({ data, auths }) => {
+        handleAsyncRoutes(cloneDeep(data), auths);
         resolve(router);
       });
     });
@@ -365,26 +367,24 @@ function getAuths(): Array<string> {
 }
 
 /** 是否有按钮级别的权限 */
-function hasAuth(value: string | Array<string>): boolean {
-  if (!value) return false;
-  /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
-  const metaAuths = getAuths();
-  if (!metaAuths) return false;
-  const isAuths = isString(value)
-    ? metaAuths.includes(value)
-    : isIncludeAllChildren(value, metaAuths);
-  return isAuths ? true : false;
-}
+// function hasAuth(value: string | Array<string>): boolean {
+//   if (!value) return false;
+//   /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
+//   const metaAuths = getAuths();
+//   if (!metaAuths) return false;
+//   const isAuths = isString(value)
+//     ? metaAuths.includes(value)
+//     : isIncludeAllChildren(value, metaAuths);
+//   return isAuths ? true : false;
+// }
 
 /** 是否有按钮级别的权限 */
-function hasGlobalAuth(value: string | Array<string>): boolean {
+function hasAuth(value: string): boolean {
   if (!value) return false;
   /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
-  const metaAuths = usePermissionStoreHook().metaAuths;
-  if (!metaAuths) return false;
-  return isString(value)
-    ? metaAuths.includes(value)
-    : isIncludeAllChildren(value, metaAuths);
+  const permissionAuths = usePermissionStoreHook().permissionAuths;
+  if (!permissionAuths) return false;
+  return permissionAuths[value];
 }
 
 /** 获取所有菜单中的第一个菜单（顶级菜单）*/
@@ -420,7 +420,6 @@ export {
   getTopMenu,
   addPathMatch,
   isOneOfArray,
-  hasGlobalAuth,
   getHistoryMode,
   addAsyncRoutes,
   getParentPaths,

src/store/modules/permission.ts

@@ -12,25 +12,6 @@ import {
 } from "../utils";
 import { useMultiTagsStoreHook } from "./multiTags";
 
-function getGlobalAuths(arr: any[]) {
-  let res = [];
-
-  function deep(arr: any[]) {
-    arr.forEach(item => {
-      let auths = item?.meta?.auths;
-      if (auths?.length > 0) {
-        res = res.concat(auths);
-      }
-      if (item.children) {
-        deep(item.children);
-      }
-    });
-  }
-
-  deep(arr);
-  return res;
-}
-
 export const usePermissionStore = defineStore({
   id: "pure-permission",
   state: () => ({
@@ -43,9 +24,15 @@ export const usePermissionStore = defineStore({
     // 缓存页面keepAlive
     cachePageList: [],
     // 全局的授权
-    metaAuths: []
+    permissionAuths: []
   }),
   actions: {
+    handleWholeAuths(auths: any[]) {
+      this.permissionAuths = {};
+      auths.forEach(auth => {
+        this.permissionAuths[auth] = true;
+      });
+    },
     /** 组装整体路由生成的菜单 */
     handleWholeMenus(routes: any[]) {
       this.wholeMenus = filterNoPermissionTree(
@@ -54,7 +41,6 @@ export const usePermissionStore = defineStore({
       this.flatteningRoutes = formatFlatteningRoutes(
         this.constantMenus.concat(routes)
       );
-      this.metaAuths = getGlobalAuths(this.constantMenus.concat(routes));
     },
     cacheOperate({ mode, name }: cacheType) {
       const delIndex = this.cachePageList.findIndex(v => v === name);

src/views/account/components/AccountManagement.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import { deviceDetection } from "@pureadmin/utils";
 import { useAccountManage } from "../utils/hook";
-import { hasGlobalAuth } from "@/router/utils";
+import { hasAuth } from "@/router/utils";
 
 defineOptions({
   name: "AccountManagement"
@@ -14,23 +14,23 @@ const list = computed(() => [
   {
     name: "password",
     title: t("account.password"),
-    button: hasGlobalAuth("reset:UserInfo") && t("buttons.update")
+    button: hasAuth("reset:UserInfo") && t("buttons.update")
   },
   {
     name: "phone",
     title: t("userinfo.phone"),
     illustrate: userinfoStore.email
       ? `${t("account.bind")}：${userinfoStore.phone}`
       : t("account.unbound"),
-    button: hasGlobalAuth("bind:UserInfo") && t("buttons.update")
+    button: hasAuth("bind:UserInfo") && t("buttons.update")
   },
   {
     name: "email",
     title: t("userinfo.email"),
     illustrate: userinfoStore.email
       ? `${t("account.bind")}：${userinfoStore.email}`
       : t("account.unbound"),
-    button: hasGlobalAuth("bind:UserInfo") && t("buttons.update")
+    button: hasAuth("bind:UserInfo") && t("buttons.update")
   }
 ]);
 

src/views/account/utils/hook.tsx

@@ -5,7 +5,7 @@ import {
   delay,
   deviceDetection
 } from "@pureadmin/utils";
-import { hasGlobalAuth } from "@/router/utils";
+import { hasAuth } from "@/router/utils";
 import { message } from "@/utils/message";
 import { computed, h, onMounted, reactive, type Ref, ref, toRaw } from "vue";
 import { userInfoApi } from "@/api/user/userinfo";
@@ -39,10 +39,10 @@ export function useApiAuth() {
   });
 
   const auth = reactive({
-    upload: hasGlobalAuth("upload:UserInfo"),
-    update: hasGlobalAuth("update:UserInfo"),
-    bind: hasGlobalAuth("bind:UserInfo"),
-    reset: hasGlobalAuth("reset:UserInfo")
+    upload: hasAuth("upload:UserInfo"),
+    update: hasAuth("update:UserInfo"),
+    bind: hasAuth("bind:UserInfo"),
+    reset: hasAuth("reset:UserInfo")
   });
   return {
     api,
@@ -191,7 +191,7 @@ export function useUserLoginLog() {
   });
 
   const auth = reactive({
-    list: hasGlobalAuth("list:userLoginLog")
+    list: hasAuth("list:userLoginLog")
   });
 
   const { tagStyle } = usePublicHooks();

src/views/system/components/searchDept.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { h, reactive } from "vue";
-import { hasGlobalAuth } from "@/router/utils";
+import { hasAuth } from "@/router/utils";
 import { searchDeptApi } from "@/api/system/search";
 import RePlusSearch from "@/components/RePlusSearch";
 import { ElImage } from "element-plus";
@@ -32,7 +32,7 @@ const baseColumnsFormat = ({ listColumns }) => {
 
 <template>
   <RePlusSearch
-    v-if="hasGlobalAuth('list:systemSearchDept')"
+    v-if="hasAuth('list:systemSearchDept')"
     v-model="selectValue"
     locale-name="systemDept"
     :baseColumnsFormat="baseColumnsFormat"

src/views/system/components/searchMenu.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { h, reactive } from "vue";
-import { hasGlobalAuth } from "@/router/utils";
+import { hasAuth } from "@/router/utils";
 import { searchMenuApi } from "@/api/system/search";
 import RePlusSearch from "@/components/RePlusSearch";
 import { transformI18n } from "@/plugins/i18n";
@@ -32,7 +32,7 @@ const baseColumnsFormat = ({ listColumns }) => {
 
 <template>
   <RePlusSearch
-    v-if="hasGlobalAuth('list:systemSearchMenu')"
+    v-if="hasAuth('list:systemSearchMenu')"
     v-model="selectValue"
     locale-name="systemMenu"
     :baseColumnsFormat="baseColumnsFormat"

src/views/system/components/searchRole.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { reactive } from "vue";
-import { hasGlobalAuth } from "@/router/utils";
+import { hasAuth } from "@/router/utils";
 import { searchRoleApi } from "@/api/system/search";
 import RePlusSearch from "@/components/RePlusSearch";
 
@@ -17,7 +17,7 @@ const api = reactive(searchRoleApi);
 
 <template>
   <RePlusSearch
-    v-if="hasGlobalAuth('list:systemSearchRole')"
+    v-if="hasAuth('list:systemSearchRole')"
     v-model="selectValue"
     locale-name="systemRole"
     :api="api"