动态路由

kuangshp · kuangshp · commit d74424367e7f · 2020-06-02T11:34:15.000+08:00
diff --git a/muenu-server.js b/muenu-server.js
@@ -0,0 +1,51 @@
+const express = require('express');
+
+const app = express();
+app.all('*', (req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Headers', 'Content-Type,token');
+  res.header('Access-Control-Allow-Methods', '*');
+  res.header('Content-Type', 'application/json;charset=utf-8');
+  next();
+});
+app.get('/category', (req, res) => {
+  res.json({
+    menuList: [
+      // {
+      //   id: 0,
+      //   icon: 'el-icon-s-order',
+      //   index: 'table',
+      //   title: '基础表格',
+      //   pid: -1,
+      // },
+      {
+        id: 1,
+        icon: 'el-icon-s-marketing',
+        index: 'tab',
+        title: 'tab选项卡',
+        pid: -1,
+      },
+      {
+        id: 2,
+        icon: 'el-icon-folder-opened',
+        index: 'form',
+        title: '表单相关',
+        pid: -1,
+      },
+      {
+        id: 3,
+        index: 'base_form',
+        title: '基本表单',
+        icon: 'el-icon-s-data',
+        pid: 2,
+      },
+      {
+        id: 4,
+        index: 'upload',
+        title: '文件上传',
+        pid: 2,
+      }
+    ]
+  });
+});
+app.listen(3000); // http://localhost:3000/category
diff --git a/src/components/menus/Menus.vue b/src/components/menus/Menus.vue
@@ -24,6 +24,7 @@
 <script>
 import MenuItem from './MenuItem.vue';
 import { mapState } from 'vuex';
+import { getTreeList } from '@/utils';
 
 export default {
   data () {
@@ -32,9 +33,17 @@ export default {
   },
   computed: {
     ...mapState({
-      menuList: state => state.view.menuList,
+      authMenuList: state => state.menus.authMenuList,
       isCollapse: state => state.view.sidebarOpened,
     }),
+    // 对菜单进行格式化
+    menuList () {
+      try {
+        return getTreeList(this.authMenuList);
+      } catch (e) {
+        return [];
+      }
+    },
     onRoutes () {
       return this.$route.path.replace('/', '');
     }
diff --git a/src/router/router.js b/src/router/router.js
@@ -1,10 +1,11 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import store from '@/store';
 import home from './shared/home';
 import login from './shared/login';
+import { constantRoutes } from './constant-routes';
 import { setTitle, storage } from '@/utils';
 import { authToken } from '@/config';
-import { constantRoutes } from './constant-routes';
 Vue.use(VueRouter)
 
 const routes = [
@@ -48,12 +49,23 @@ const auth = (to, from, next) => {
     next({ name: 'login', query: { backUrl: to.fullPath } });
   }
 }
+
+const authRoutes = async (to, from, next) => {
+  if (!store.state.hasPermission) {
+    const routes = await store.dispatch('getAuthRoutes');
+    // router.options.routes[0].children.push(...routes);
+    router.addRoutes(routes);
+    console.log(routes, '////', router.options.routes)
+    next({ ...to, replace: true });
+  } else {
+    next();
+  }
+}
 /********************************路由拦截配置 start********************************/
 router.beforeEach((to, from, next) => {
+  authRoutes(to, from, next);
   // 校验是否登录
   auth(to, from, next);
-  // 动态生成路由
-  // mergeRoute();
   setTitle(to.meta.title);
   next();
 });
diff --git a/src/services/menu.js b/src/services/menu.js
@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+class MenuService {
+  // 获取菜单的接口
+  async getMenuList () {
+    return await axios.get('http://localhost:3000/category');
+  }
+}
+
+export default new MenuService();
diff --git a/src/store/modules/menus.js b/src/store/modules/menus.js
@@ -0,0 +1,56 @@
+import MenuService from '@/services/menu';
+import { constantRoutes } from '@/router/constant-routes';
+
+/**
+ * @Author: 水痕
+ * @Date: 2020-06-02 09:57:15
+ * @LastEditors: 水痕
+ * @Description: 根据服务器返回的路由文件过滤本地的路由文件数据
+ * @param {type} 
+ * @return: 
+ */
+const getRoutes = (authList) => {
+  const auth = authList.map(item => item.index);
+  // 对当前本地的路由文件进行过滤
+  const filterRoutes = (authRoutes) => {
+    return authRoutes.filter(route => {
+      if (auth.includes(route.name)) {
+        // 递归遍历子菜单
+        if (route.children) {
+          route.children = filterRoutes(route.children);
+        }
+        return route;
+      }
+    })
+  }
+  return filterRoutes(constantRoutes);
+}
+
+export default {
+  state: {
+    hasPermission: false, // 判断是否有权限
+    authMenuList: [], // 授权的菜单列表
+  },
+  mutations: {
+    setPermission (state) {
+      state.hasPermission = true;
+    },
+    setAuthMenuList (state, payload) {
+      state.authMenuList = payload;
+    }
+  },
+  actions: {
+    // 获取菜单的api
+    async getMenuListApi ({ commit }) {
+      const { menuList } = await MenuService.getMenuList();
+      commit('setAuthMenuList', menuList);
+      commit('setPermission');
+      return menuList;
+    },
+    // 根据获取的菜单，动态添加路由到本地路由文件
+    async getAuthRoutes ({ dispatch }) {
+      const authList = await dispatch('getMenuListApi');
+      return getRoutes(authList);
+    }
+  }
+}
diff --git a/src/store/modules/view.js b/src/store/modules/view.js
@@ -2,34 +2,7 @@ import * as types from '../mutation-types';
 const state = {
   sidebarOpened: true,
   title: '主页',
-  menuList: [
-    {
-      icon: 'el-icon-s-order',
-      index: 'table',
-      title: '基础表格'
-    },
-    {
-      icon: 'el-icon-s-marketing',
-      index: 'tab',
-      title: 'tab选项卡'
-    },
-    {
-      icon: 'el-icon-folder-opened',
-      index: 'form',
-      title: '表单相关',
-      children: [
-        {
-          index: 'base_form',
-          title: '基本表单',
-          icon: 'el-icon-s-data',
-        },
-        {
-          index: 'upload',
-          title: '文件上传'
-        }
-      ]
-    }
-  ],
+  menuList: [],
 };
 
 const getters = {
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -1,4 +1,5 @@
 export * from './http';
 export * from './storage';
 export * from './str';
-export * from './set-title';
+export * from './set-title';
+export * from './menu';
diff --git a/src/utils/menu.js b/src/utils/menu.js
@@ -0,0 +1,31 @@
+/**
+ * @Author: 水痕
+ * @Date: 2020-06-02 10:37:18
+ * @LastEditors: 水痕
+ * @Description: 定义一个方法将获取的数组数据转换为树结构数据
+ * @param {type} 
+ * @return: 
+ */
+export const getTreeList = (dataList) => {
+  if (!Array.isArray(dataList)) {
+    throw new TypeError(`${dataList}不是数组`);
+  }
+  // 第一次是将全部的permissionId作为对象的key重组成一个对象
+  let formatObj = dataList.reduce((pre, cur) => {
+    return { ...pre, [cur['id']]: cur }
+  }, {});
+
+  let formatArray = dataList.reduce((arr, cur) => {
+    let pid = cur.pid ? cur.pid : 0;
+    let parent = formatObj[pid];
+    if (parent) {
+      parent.children ? parent.children.push(cur) : parent.children = [cur];
+    } else {
+      arr.push(cur)
+    }
+    return arr;
+  }, []);
+  console.log(formatArray);
+  return formatArray;
+};
+
diff --git a/src/views/shared/app/Index.vue b/src/views/shared/app/Index.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view />
+    <keep-alive>
+      <router-view />
+    </keep-alive>
   </div>
 </template>
 
