fix: 不在菜单中的useMenuLimit重定向到第一个菜单

src/config/index.js

+export default {
+  // eslint-disable-next-line
+  api: process.env['NODE_ENV'] === 'development' ? 'http://gicdev.demogic.com/' : window.location.protocol + '//' + window.location.host + '/' || ''
+  // /dmApi/
+  // http://gicdev.demogic.com/
+};

src/main.js

@@ -13,6 +13,7 @@ import store from './store';
 import 'element-ui/lib/theme-chalk/index.css';
 import './assets/theme/index.css';
 import '../static/fonts/iconfont.js';
+import limit from '@/utils/limiting';
 Vue.use(ElementUI);
 Vue.use(VueAxios, axios);
 // import vueGicStoreLinkage from '@gic-test/vue-gic-store-linkage';
@@ -21,10 +22,23 @@ Vue.use(VueAxios, axios);
 Vue.axios.defaults.withCredentials = true; // 跨域cookie访问
 Vue.config.productionTip = false;
 /* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  store,
-  components: { App },
-  template: '<App/>'
+/* eslint-disable no-new */
+limit({
+  createApp() {
+    new Vue({
+      el: '#app',
+      router,
+      store,
+      components: { App },
+      template: '<App/>'
+    });
+  }
 });
+
+// new Vue({
+//   el: '#app',
+//   router,
+//   store,
+//   components: { App },
+//   template: '<App/>'
+// });

src/router/index.js

 import Vue from 'vue';
 import Router from 'vue-router';
+import store from '@/store/index';
+import bus from '../assets/eventBus.js';
 import VueClipboard from 'vue-clipboard2';
 import main from '../views/main';
 import gift from '../views/goods/gift/gift';
@@ -16,6 +18,9 @@ import recordList from '../views/setting/recordList';
 import convenSet from '../views/setting/convenSet';
 Vue.use(VueClipboard);
 
+/**
+ * meta useMenuLimit 被上标记为true的路由，进入时将会与store中允许的菜单路由进行比较，如果不存在将会被重定向
+ */
 const router = new Router({
   routes: [
     {
@@ -26,7 +31,10 @@ const router = new Router({
         {
           path: '/gift',
           name: 'gift',
-          component: gift
+          component: gift,
+          meta: {
+            useMenuLimit: true
+          }
         },
         {
           path: '/giftInfo',
@@ -36,7 +44,10 @@ const router = new Router({
         {
           path: '/coupon',
           name: 'coupon',
-          component: coupon
+          component: coupon,
+          meta: {
+            useMenuLimit: true
+          }
         },
         {
           path: '/couponInfo',
@@ -46,7 +57,10 @@ const router = new Router({
         {
           path: '/giftExchange',
           name: 'giftExchange',
-          component: giftExchange
+          component: giftExchange,
+          meta: {
+            useMenuLimit: true
+          }
         },
         {
           path: '/orderDetail',
@@ -56,17 +70,26 @@ const router = new Router({
         {
           path: '/couponExchange',
           name: 'couponExchange',
-          component: couponExchange
+          component: couponExchange,
+          meta: {
+            useMenuLimit: true
+          }
         },
         {
           path: '/refundList',
           name: 'refundList',
-          component: refundList
+          component: refundList,
+          meta: {
+            useMenuLimit: true
+          }
         },
         {
           path: '/deliverSet',
           name: 'deliverSet',
-          component: deliverSet
+          component: deliverSet,
+          meta: {
+            useMenuLimit: true
+          }
         },
         {
           path: '/editDeliver',
@@ -76,21 +99,37 @@ const router = new Router({
         {
           path: '/recordList',
           name: 'recordList',
-          component: recordList
+          component: recordList,
+          meta: {
+            useMenuLimit: true
+          }
         },
         {
           path: '/convenSet',
           name: 'convenSet',
-          component: convenSet
+          component: convenSet,
+          meta: {
+            useMenuLimit: true
+          }
         }
       ]
     }
   ]
 });
-// router.beforeEach((to, from, next) => {
-//   // ...
-//   console.log(123456789, to);
-//   next();
-// });
+
+router.beforeEach((to, from, next) => {
+  if (from.meta.useMenuLimit == true) {
+    if (store.state.product.canUseMenuUrl.includes(to.path)) {
+      next();
+    } else {
+      // 不允许访问则重置到menu的第一个路由
+      // 全部不选（没有积分商城任何菜单时，limit.js catch
+      bus.$emit('updateLeft', store.state.product.canUseMenuUrl[0]); // 更新左侧
+      next(store.state.product.canUseMenuUrl[0]);
+    }
+  } else {
+    next();
+  }
+});
 
 export default router;

src/store/vuex/product.js

@@ -2,7 +2,8 @@
 const state = {
   all: 0,
   cartData: [],
-  total: 0
+  total: 0,
+  canUseMenuUrl: []
 };
 
 // getters
@@ -53,6 +54,10 @@ const mutations = {
         state.cartData.splice(i, 1);
       }
     }
+  },
+  // 更新可用菜单可用url
+  mutations_updateMenuUrl(state, url) {
+    state.canUseMenuUrl = url;
   }
 };
 

src/utils/limiting.js

+import request from '@/service/request.js';
+import globalConfig from '@/config/index';
+
+import store from '@/store/index';
+export default config => {
+  const { createApp } = config;
+  window.onload = async function() {
+    try {
+      // 获取用户企业id
+      let loginUserRes = await request.get('/api-auth/get-current-memu-data?project=integral-mall&path=giftExchange&requestProject=integral-mall');
+      const leftMenu = loginUserRes.data.result.leftMenu || [];
+      let _leftMenuLimit = [];
+      console.log(leftMenu);
+      leftMenu.forEach(element => {
+        if (element.level4List) {
+          element.level4List.forEach(level4 => {
+            _leftMenuLimit.push(`/${level4.menuUrl}`);
+          });
+        } else {
+          _leftMenuLimit.push(`/${element.menuUrl}`);
+        }
+      });
+      _leftMenuLimit = [...new Set(_leftMenuLimit)];
+      store.commit('mutations_updateMenuUrl', _leftMenuLimit); // 更新企业id
+      createApp();
+    } catch (error) {
+      // 未登录
+      window.location.href = globalConfig.api + 'gic-web/';
+    }
+  };
+};

src/views/main.vue

@@ -3,7 +3,7 @@
     <vue-gic-header :projectName="projectName" :collapseFlag="collapseFlag" @collapseTag="collapseTag" @toRouterView="toRouterView"></vue-gic-header>
     <div class="mall-content-container">
       <div class="left-menu">
-        <vue-gic-aside-menu :projectName="projectName" :leftModulesName="leftModulesName" :collapseFlag="collapseFlag" style="display:inline-block;height:100%"></vue-gic-aside-menu>
+        <vue-gic-aside-menu ref="leftmenu" :projectName="projectName" :leftModulesName="leftModulesName" :collapseFlag="collapseFlag" style="display:inline-block;height:100%"></vue-gic-aside-menu>
       </div>
       <div class="goods-manege-content" :style="{ marginLeft: widthData }">
         <div :style="{ minHeight: mallHeight + 'px' }">
@@ -34,6 +34,10 @@ export default {
     bus.$on('widthData', function(widthData) {
       that.widthData = widthData;
     });
+    bus.$on('updateLeft', key => {
+      // 刷新左侧菜单
+      that.$refs.leftmenu.handleSelect(key);
+    });
   },
   computed: {},
   methods: {