动态侧边栏初步完成

src/api/mt.js

@@ -2,7 +2,8 @@
 import { axios } from '@/utils/request';
 
 const api = {
-  getToken: '/api/oauth/getTokenByCode'
+  getToken: '/api/oauth/getTokenByCode',
+  queryMenuById: 'user/queryMenuById',  //查询侧边栏
 };
 
 export function getToken(params) {
@@ -12,3 +13,10 @@ export function getToken(params) {
     params: params
   });
 }
+export function queryMenuById(params) {
+  return axios({
+    url: api.queryMenuById,
+    method: 'get',
+    params: params
+  });
+}

src/config/router.config.js

 // eslint-disable-next-line
 import { BasicLayoutWithoutTopnav, PageView } from '@/layouts'
-
-export const asyncRouterMap = [
-
+export const finalRouterMap = [
   {
-    path: '/',
-    name: 'index',
+    path: '/async',
     component: BasicLayoutWithoutTopnav,
     meta: {},
-    redirect: '/onlineCourse',
-    children: [
-      /* {
-        path: '/home',
-        name: 'home',
-        component: () => import('@/views/home'),
-        meta: { title: '首页', keepAlive: true, icon: 'switcher', permission: ['home'] }
-      },
-      {
-        path: '/courseList',
-        name: 'courseList',
-        component: () => import('@/views/courseList'),
-        meta: { title: '课程列表', keepAlive: true, icon: 'switcher', permission: ['courseList'] }
-      }, */
+    children: []
+  }
+]
+export const asyncRouterMap = [
       {
         path: '/courseTrain',
         name: 'courseTrain',
@@ -81,8 +68,33 @@ export const asyncRouterMap = [
             component: () => import('@/views/courseTrain/labelManage'),
             meta: { title: '标签管理', keepAlive: true, permission: [ 'courseTrain' ] }
           }
-        ]
+    ]}
+];
+
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/',
+    name: 'index',
+    component: BasicLayoutWithoutTopnav,
+    meta: {},
+    redirect: '/systemManagement',
+    children: [
+      /* {
+        path: '/home',
+        name: 'home',
+        component: () => import('@/views/home'),
+        meta: { title: '首页', keepAlive: true, icon: 'switcher', permission: ['home'] }
       },
+      {
+        path: '/courseList',
+        name: 'courseList',
+        component: () => import('@/views/courseList'),
+        meta: { title: '课程列表', keepAlive: true, icon: 'switcher', permission: ['courseList'] }
+      }, */
       {
         path: '/systemManagement',
         name: 'systemManagement',
@@ -112,11 +124,3 @@ export const asyncRouterMap = [
     path: '*', redirect: '/404', hidden: true
   }
 ];
-
-/**
- * 基础路由
- * @type { *[] }
- */
-export const constantRouterMap = [
-
-];

src/layouts/BasicLayoutWithoutTopnav.vue

@@ -94,7 +94,8 @@ export default {
   computed: {
     ...mapState({
       // 动态主路由
-      mainMenu: state => state.permission.addRouters
+      mainMenu: state => state.user.userRouters,
+      asyncMenu: state => state.user.userAddRouters
     }),
     contentPaddingLeft() {
       if (!this.fixSidebar || this.isMobile()) {
@@ -128,8 +129,8 @@ export default {
       }, 100)
   },
   created() {
-    // this.menus = this.mainMenu.find(item => item.path === '/').children
-    this.menus = asyncRouterMap.find(item => item.path === '/').children;
+     this.menus = this.mainMenu.find(item => item.path === '/').children.concat(this.asyncMenu.find(item => item.path === '/async').children)
+    //this.menus = asyncRouterMap.find(item => item.path === '/').children;
     this.collapsed = !this.sidebarOpened;
   },
   mounted() {

src/main.js

@@ -13,7 +13,7 @@ import { VueAxios } from './utils/request';
 
 import bootstrap from './core/bootstrap';
 import './core/use';
-// import './permission' // permission control
+import './permission' // permission control
 import './utils/filter';
 
 import echarts from 'echarts';

src/permission.js

+import router from '@/router'
+import store from '@/store'
+// import { Message } from 'element-ui'
+// import { getToken } from '@/utils/auth' // getToken from cookie
+
+const whiteList = ['/login'] // 不重定向白名单
+let firstLoad = true // 标识第一次加载路由
+
+function getMenus (to, next) {
+  if (store.getters.userMenus.length === 0) {
+    store.dispatch('GetInfo').then(res => { // 拉取用户信息
+      const menus = res.data
+      store.dispatch('GenerateRoutes', { menus }).then(() => { // 生成可访问的路由表
+        console.log(store.state.user.userAddRouters)
+        router.addRoutes(store.state.user.userAddRouters) // 动态添加可访问路由表
+        next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+      })
+    }).catch((err) => {
+      console.log(err)
+    })
+  } else {
+    next()
+  }
+}
+
+router.beforeEach(async (to, from, next) => {
+  if (whiteList.indexOf(to.path) !== -1) {
+    next()
+  } else {
+    console.log('permission', from)
+      getMenus(to, next)
+  }
+})
+router.afterEach(() => {
+})

src/router/index.js

@@ -8,5 +8,5 @@ export default new Router({
   mode: 'hash',
   base: process.env.BASE_URL,
   scrollBehavior: () => ({ y: 0 }),
-  routes: constantRouterMap.concat(asyncRouterMap)
+  routes: constantRouterMap
 });

src/store/getters.js

@@ -5,6 +5,7 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   nickname: state => state.user.name,
+  userMenus: state => state.user.userMenus,
   welcome: state => state.user.welcome,
   roles: state => state.user.roles,
   userInfo: state => state.user.info,

src/store/index.js

@@ -2,13 +2,15 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 
 import app from './modules/app';
+import user from './modules/user';
 import getters from './getters';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
-    app
+    app,
+    user
   },
   state: {
 

src/store/modules/user.js

+import Vue from 'vue';
+import { constantRouterMap, asyncRouterMap, finalRouterMap } from '@/config/router.config';
+import { queryMenuById } from '@/api/mt'
+function hasPermission (menus, route) {
+  if (route.name) {
+    return menus.some(aaa => route.name === aaa.href)
+  } else {
+    return true
+  }
+}
+const user = {
+  state: {
+    userAddRouters: [],
+    userRouters: constantRouterMap,
+    userMenus: []
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      finalRouterMap.find(item => item.path === '/async').children = (routers)
+      state.userAddRouters = finalRouterMap
+      state.userRouters = constantRouterMap.concat(finalRouterMap)
+    },
+    // 保存侧边栏数据
+    SET_MENUS: (state, menus) => {
+      state.userMenus = menus
+    }
+
+  },
+  actions: {
+    // 获取侧边栏信息
+    GetInfo ({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        const params = {modelId: 20,userId: '10d62b3a7d6f4e9aba45d04355042860',corpId: '1'}
+        queryMenuById(params).then(response => {
+          const data = response.data
+          if (data && data.length > 0) { // 验证返回的是否是一个非空数组
+            commit('SET_MENUS', data)
+          } else {
+            reject(new Error('getInfo:  must be a non-null array !'))
+          }
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    // 生成动态侧边栏
+    GenerateRoutes ({ commit }, data) {
+      return new Promise(resolve => {
+        const { menus } = data
+        console.log(menus)
+        console.log(constantRouterMap)
+        console.log(asyncRouterMap)
+        const accessedRouters = asyncRouterMap.filter(v => {
+          if (hasPermission(menus, v)) {
+            if (v.children && v.children.length > 0) {
+              v.children = v.children.filter(child => {
+                if (hasPermission(menus, child)) {
+                  return child
+                }
+                return false
+              })
+              return v
+            } else {
+              return v
+            }
+          }
+          return false
+        })
+        commit('SET_ROUTERS', accessedRouters)
+        resolve()
+      })
+    }
+  }
+};
+
+export default user;

src/utils/request.js

@@ -28,7 +28,7 @@ import {
 //   return service.get('/task/tb-user/refreshToken', params);
 // }
 const service = axios.create({
-  baseURL: 'http://192.168.2.241:8081' // api base_url
+  baseURL: 'http://192.168.9.18:8081' // api base_url
   // baseURL: '/api/task/v1' // api base_url
   // baseURL: 'http://192.168.2.181:8081/'
   // baseURL: 'http://localhost:8081/'

src/views/home/index.vue

 <template>
   <div>
-    <page-view :title="false">
       <div class="content">
         <div class="banner">
           <home-banner />
@@ -52,7 +51,6 @@
           </a-tabs>
         </div>
       </div>
-    </page-view>
   </div>
 </template>