feat: 路由逻辑处理

src/api/index.js

+import { request, METHOD } from '@/utils';
+
+export function getUserDetailInfoApi() {
+    return request('/api/v1/detail', METHOD.GET);
+}

src/pages/frame/layouts/AdminLayout.vue

 <template>
     <a-layout :class="['admin-layout', 'beauty-scroll']">
         <drawer v-if="isMobile" v-model="drawerOpen">
-            <side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect" />
+            <side-menu
+                :theme="theme.mode"
+                :menuData="menuData"
+                :collapsed="false"
+                :collapsible="false"
+                @menuSelect="onMenuSelect"
+            />
         </drawer>
 
-        <side-menu :class="[fixedSideBar ? 'fixed-side' : '']" :theme="theme.mode" v-else-if="layout === 'side' || layout === 'mix'" :menuData="sideMenuData" :collapsed="collapsed" :collapsible="true" />
+        <side-menu
+            :class="[fixedSideBar ? 'fixed-side' : '']"
+            :theme="theme.mode"
+            v-else-if="layout === 'side' || layout === 'mix'"
+            :menuData="sideMenuData"
+            :collapsed="collapsed"
+            :collapsible="true"
+        />
 
-        <div v-if="fixedSideBar && !isMobile" :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side">
-        </div>
+        <div
+            v-if="fixedSideBar && !isMobile"
+            :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`"
+            class="virtual-side"
+        ></div>
 
         <drawer v-if="!hideSettingExtend" v-model="showSetting" placement="right">
             <div class="setting" slot="handler">
@@ -17,8 +33,20 @@
         </drawer>
 
         <a-layout class="admin-layout-main beauty-scroll">
-            <layout-top-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" :style="headerStyle" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse" />
-            <a-layout-header :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" v-show="fixedHeader"></a-layout-header>
+            <layout-top-header
+                :class="[{ 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage }]"
+                :style="headerStyle"
+                :menuData="headMenuData"
+                :collapsed="collapsed"
+                @toggleCollapse="toggleCollapse"
+            />
+            <a-layout-header
+                :class="[
+                    'virtual-header',
+                    { 'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage },
+                ]"
+                v-show="fixedHeader"
+            ></a-layout-header>
             <a-layout-content class="admin-layout-content" :style="`min-height: ${minHeight}px;`">
                 <div style="position: relative">
                     <slot></slot>
@@ -126,7 +154,7 @@ export default {
                 matched = matched.slice(0, matched.length - 1);
                 const { firstMenu } = this;
                 for (let menu of firstMenu) {
-                    if (matched.findIndex((item) => item.path === menu.fullPath) !== -1) {
+                    if (matched.findIndex(item => item.path === menu.fullPath) !== -1) {
                         this.setActivatedFirst(menu.fullPath);
                         break;
                     }

src/pages/frame/view/login/Login.vue

@@ -78,7 +78,7 @@
 <script>
 import CommonLayout from '@/pages/frame/layouts/CommonLayout';
 import { login } from '@/pages/frame/services/accountService';
-import { setToken, clearToken } from '@/utils/requestUtil';
+import { setToken, clearToken, setUserId } from '@/utils';
 import { loadRoutes } from '@/utils/routerUtil';
 import { mapMutations } from 'vuex';
 import loginI18n from './i18n';
@@ -120,19 +120,9 @@ export default {
         afterLogin(result) {
             this.logging = false;
             const { token, userId } = result;
-            console.log(token);
             setToken(token);
+            setUserId(userId);
             this.$router.replace('/dashboard/workbench');
-
-            // this.setUser(user);
-            // this.setPermissions(permissions);
-            // this.setRoles(roles);
-            // setAuthorization({
-            //     token: loginResult.data.token,
-            //     expireAt: new Date(loginResult.data.expireAt),
-            // });
-            // // 获取路由配置
-            // loadRoutes(routers);
         },
     },
 };

src/pages/frame/view/template/PageTemplateView.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import PageLayout from '../../layouts/PageLayout';
+import PageLayout from '../../layouts/PageLayout.vue';
 import PageToggleTransition from '@/components/transition/PageToggleTransition';
 import { mapState } from 'vuex';
 

src/pages/home/index.vue

+<template>
+    <h1>Home</h1>
+</template>

src/pages/system/view/menu/MenuManagement.vue

@@ -26,32 +26,17 @@
 </template>
 
 <script>
+import { convertListToTree } from '@/utils';
+
 export default {
     data: () => ({
         add: {},
         addBtn: { text: '新建', title: '菜单配置' },
         sortOrder: 'ascend',
     }),
+
     methods: {
-        formatData(data = []) {
-            let menu,
-                res = [],
-                tmp = data.slice();
-            while ((menu = tmp.pop())) {
-                if (menu.parentMenuId === 0) res.push(menu);
-                else {
-                    for (const resetMenu of data) {
-                        if (menu.parentMenuId === resetMenu.menuId) {
-                            resetMenu.children
-                                ? resetMenu.children.push(menu)
-                                : (resetMenu.children = [menu]);
-                        }
-                    }
-                }
-            }
-            console.log(res);
-            return res;
-        },
+        formatData: convertListToTree,
         sorter(pre, next) {
             return pre.viewIndex - next.viewIndex;
         },

src/utils/i18nUtil.js

-import routesI18n from '@/router/i18n'
-import {getI18nKey} from '@/utils/routerUtil'
+import routesI18n from '@/router/i18n';
+import { getI18nKey } from '@/utils/routerUtil';
 
 /**
  * 根据 router options 配置生成 国际化语言
@@ -9,23 +9,29 @@ import {getI18nKey} from '@/utils/routerUtil'
  * @returns {*}
  */
 function generateI18n(lang, routes, valueKey) {
-  routes.forEach(route => {
-    let keys = getI18nKey(route.fullPath).split('.')
-    let value = valueKey === 'path' ? route[valueKey].split('/').filter(item => !item.startsWith(':') && item != '').join('.') : route[valueKey]
-    if (value.includes('_')) {
-      value = value.replace('_', ' ');
-      value = value.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
-    }
-    else {
-      value = value.charAt(0).toUpperCase() + value.toLowerCase().substring(1)
-    }
-   
-    lang.assignProps(keys, value)
-    if (route.children) {
-      generateI18n(lang, route.children, valueKey)
-    }
-  })
-  return lang
+    routes.forEach(route => {
+        let keys = getI18nKey(route.fullPath).split('.');
+        console.log(keys);
+        let value =
+            valueKey === 'path'
+                ? route[valueKey]
+                      .split('/')
+                      .filter(item => !item.startsWith(':') && item != '')
+                      .join('.')
+                : route[valueKey];
+        if (value.includes('_')) {
+            value = value.replace('_', ' ');
+            value = value.toLowerCase().replace(/( |^)[a-z]/g, L => L.toUpperCase());
+        } else {
+            value = value.charAt(0).toUpperCase() + value.toLowerCase().substring(1);
+        }
+
+        lang.assignProps(keys, value);
+        if (route.children) {
+            generateI18n(lang, route.children, valueKey);
+        }
+    });
+    return lang;
 }
 
 /**
@@ -34,13 +40,17 @@ function generateI18n(lang, routes, valueKey) {
  * @param parentPath
  */
 function formatFullPath(routes, parentPath = '') {
-  routes.forEach(route => {
-    let isFullPath = route.path.substring(0, 1) === '/'
-    route.fullPath = isFullPath ? route.path : (parentPath === '/' ? parentPath + route.path : parentPath + '/' + route.path)
-    if (route.children) {
-      formatFullPath(route.children, route.fullPath)
-    }
-  })
+    routes.forEach(route => {
+        let isFullPath = route.path.substring(0, 1) === '/';
+        route.fullPath = isFullPath
+            ? route.path
+            : parentPath === '/'
+            ? parentPath + route.path
+            : parentPath + '/' + route.path;
+        if (route.children) {
+            formatFullPath(route.children, route.fullPath);
+        }
+    });
 }
 
 /**
@@ -49,16 +59,16 @@ function formatFullPath(routes, parentPath = '') {
  * @param routes
  */
 function mergeI18nFromRoutes(i18n, routes) {
-  formatFullPath(routes)
-  const zh_CN = generateI18n(new Object(), routes, 'name')
-  const en_US = generateI18n(new Object(), routes, 'path')
- 
-  i18n.mergeLocaleMessage('zh_CN', zh_CN)
-  i18n.mergeLocaleMessage('en_US', en_US)
-  const messages = routesI18n.messages
-  Object.keys(messages).forEach(lang => {
-    i18n.mergeLocaleMessage(lang, messages[lang])
-  })
+    formatFullPath(routes);
+    const zh_CN = generateI18n(new Object(), routes, 'name');
+    const en_US = generateI18n(new Object(), routes, 'path');
+
+    i18n.mergeLocaleMessage('zh_CN', zh_CN);
+    i18n.mergeLocaleMessage('en_US', en_US);
+    const messages = routesI18n.messages;
+    Object.keys(messages).forEach(lang => {
+        i18n.mergeLocaleMessage(lang, messages[lang]);
+    });
 }
 
 /**
@@ -68,25 +78,22 @@ function mergeI18nFromRoutes(i18n, routes) {
  * @returns {Object}
  */
 Object.defineProperty(Object.prototype, 'assignProps', {
-  writable: false,
-  enumerable: false,
-  configurable: true,
-  value: function (keys, value) {
-    let props = this
-    for (let i = 0; i < keys.length; i++) {
-      let key = keys[i]
-      if (i == keys.length - 1) {
-        props[key] = value
-      } else {
-        props[key] = props[key] == undefined ? {} : props[key]
-        props = props[key]
-      }
-    }
-    return this
-  }
-})
+    writable: false,
+    enumerable: false,
+    configurable: true,
+    value: function(keys, value) {
+        let props = this;
+        for (let i = 0; i < keys.length; i++) {
+            let key = keys[i];
+            if (i == keys.length - 1) {
+                props[key] = value;
+            } else {
+                props[key] = props[key] == undefined ? {} : props[key];
+                props = props[key];
+            }
+        }
+        return this;
+    },
+});
 
-export {
-  mergeI18nFromRoutes,
-  formatFullPath
-}
+export { mergeI18nFromRoutes, formatFullPath };

src/utils/index.js

 export { default as langUtil } from './langUtils';
+export * from './requestUtil';
+
+const USERID_KEY = 'userId';
+export function getUserId() {
+    return window.sessionStorage.getItem(USERID_KEY) || '';
+}
+
+export function setUserId(val) {
+    window.sessionStorage.setItem(USERID_KEY, val);
+}
+
+/**
+ * 转变菜单列表为tree结构
+ * @param {Array} menuList 菜单列表
+ */
+export function convertListToTree(menuList) {
+    const tempMenu = [...menuList];
+    for (const menu of menuList) {
+        if (menu.parentMenuId === 0) continue;
+        const parent = menuList.find(m => m.menuId === menu.parentMenuId);
+        parent.children ? parent.children.push(menu) : (parent.children = [menu]);
+    }
+    return tempMenu.filter(m => m.parentMenuId === 0);
+}