fix: 🐛 权限菜单和所有菜单的区分

src/api/system/menu.ts

@@ -5,6 +5,7 @@ const fix = '/menu';
 const url = {
   insert: `${fix}/insert`, // 分页查询
   tree: `${fix}/tree`, // 查询菜单
+  treeAll: `${fix}/treeAll`, // 查询所有菜单
   update: `${fix}/update`, // 修改菜单
   delete: `${fix}/delete`, // 删除菜单
 };
@@ -16,6 +17,9 @@ export const insertMenu = (params: Object) => {
 export const getMenuTree = (params?: any) => {
   return get(url.tree, params);
 };
+export const getMenuTreeAll = (params?: any) => {
+  return get(url.treeAll, params);
+};
 
 export const updateMenu = (params: Object) => {
   return post(url.update, params);

src/router/generator.ts

@@ -60,7 +60,7 @@ export const generateRoutes = (routerMap, parent?): any[] => {
  * @returns {Promise<Router>}
  */
 export const generateDynamicRoutes = async (): Promise<RouteRecordRaw[]> => {
-  const { data } = await getMenuTree({ mode: 1 });
+  const { data } = await getMenuTree();
   const router = generateRoutes(data);
   asyncImportRoute(router);
   return router;

src/store/modules/projectSetting.ts

@@ -91,18 +91,36 @@ export const useProjectSettingStore = defineStore({
     async setProjectSetting() {
       const useDesignSettingStore = useDesignSetting();
       const { data } = await getUserStyleSetting();
-      this.navMode = data.navMode;
-      this.navTheme = data.navTheme;
-      this.isMobile = data.isMobile;
-      this.headerSetting = data.headerSetting;
-      this.showFooter = data.showFooter;
-      this.menuSetting = data.menuSetting;
-      this.multiTabsSetting = data.multiTabsSetting;
-      this.crumbsSetting = data.crumbsSetting;
-      this.isPageAnimate = data.isPageAnimate;
-      this.pageAnimateType = data.pageAnimateType;
+      this.navMode = data.navMode ?? 'vertical';
+      this.navTheme = data.navTheme ?? 'light';
+      this.isMobile = data.isMobile ?? false;
+      this.headerSetting = data.headerSetting ?? {
+        bgColor: '#fff',
+        fixed: true,
+        isReload: true,
+      };
+      this.showFooter = data.showFooter ?? true;
+      this.menuSetting = data.menuSetting ?? {
+        minMenuWidth: 64,
+        menuWidth: 200,
+        fixed: true,
+        mixMenu: false,
+        mobileWidth: 800,
+        collapsed: false,
+      };
+      this.multiTabsSetting = data.multiTabsSetting ?? {
+        bgColor: '#fff',
+        show: true,
+        fixed: true,
+      };
+      this.crumbsSetting = data.crumbsSetting ?? {
+        show: true,
+        showIcon: false,
+      };
+      this.isPageAnimate = data.isPageAnimate ?? true;
+      this.pageAnimateType = data.pageAnimateType ?? 'fade-bottom';
 
-      useDesignSettingStore.setAppTheme(data.appTheme);
+      useDesignSettingStore.setAppTheme(data.appTheme ?? '#2d8cf0');
     },
 
     setIsMobile(value: boolean): void {

src/store/modules/user.ts

@@ -1,10 +1,15 @@
 import { defineStore } from 'pinia';
 import { store } from '@/store';
+import { useAsyncRoute } from '@/store/modules/asyncRoute';
 import { StorageEnum } from '@/enums/storageEnum';
 import { ResultEnum } from '@/enums/httpEnum';
 import { storage, routerTurnByName } from '@/utils';
 import { login, getUserInfo } from '@/api/system/user';
 import { PageEnum } from '@/enums/pageEnum';
+import router from '@/router';
+import type { RouteRecordRaw } from 'vue-router';
+import { useProjectSetting } from '@/store/modules/projectSetting';
+
 export type UserInfoType = {
   // TODO: add your own data
   name: string;
@@ -68,6 +73,14 @@ export const useUserStore = defineStore({
         const ex = 7 * 24 * 60 * 60;
         storage.set(StorageEnum.ZS_ACCESS_TOKEN, data, ex);
         this.setToken(data);
+        const asyncRouteStore = useAsyncRoute();
+        const useProjectSettingStore = useProjectSetting();
+        const routes = await asyncRouteStore.generateRoutes();
+        await useProjectSettingStore.setProjectSetting();
+        // 动态添加可访问路由表
+        routes.forEach((item: unknown) => {
+          router.addRoute(item as unknown as RouteRecordRaw);
+        });
         // this.setUserInfo(result);
       }
       return res;
@@ -76,7 +89,7 @@ export const useUserStore = defineStore({
     // 获取用户信息
     async getInfo() {
       const { data } = await getUserInfo();
-      console.log(data, '用户信息');
+      // console.log(data, '用户信息');
 
       // if (result.permissions && result.permissions.length) {
       // const permissionsList = result.permissions;

src/views/system/menu/menu.vue

@@ -236,7 +236,7 @@ import {
 } from '@vicons/antd';
 import { getTreeItem } from '@/utils';
 import CreateDrawer from './CreateDrawer.vue';
-import { getMenuTree, updateMenu, deleteMenu } from '@/api/system/menu';
+import { getMenuTreeAll, updateMenu, deleteMenu } from '@/api/system/menu';
 interface TreeNode {
   key: string;
   children?: TreeNode[];
@@ -395,7 +395,7 @@ const getKeys = (data: TreeNode[]): string[] => {
 const getMenuTreeApi = async () => {
   try {
     loading.value = true;
-    const treeMenuList = await getMenuTree();
+    const treeMenuList = await getMenuTreeAll();
     const res = mapTreeData(treeMenuList.data);
 
     Object.assign(formParams, getKeys(res));

src/views/system/role/role.vue

@@ -83,7 +83,7 @@ import { columns } from './columns';
 import { PlusOutlined } from '@vicons/antd';
 import { getTreeAll } from '@/utils';
 import { getRuleList } from '@/api/system/role';
-import { getMenuTree } from '@/api/system/menu';
+import { getMenuTreeAll } from '@/api/system/menu';
 import { queryMenuByRole, saveRoleMenu } from '@/api/system/roleMenu';
 
 const actionRef = ref();
@@ -237,7 +237,7 @@ function checkedAllHandle() {
 }
 
 onMounted(async () => {
-  const treeMenuList = await getMenuTree();
+  const treeMenuList = await getMenuTreeAll();
   const res = mapTreeData(treeMenuList.data);
   expandedKeys.value = treeMenuList.data.map((item) => item.key);
   treeData.value = res;