update: 权限校验

menu-data/button-code.json

+{"multipleAssign":"multipleAssign","assign":"assign","syncTagLog":"syncTagLog","willSyncTag":"willSyncTag","groupExpire":"groupExpire","syncGroup":"syncGroup","addGroupTemp":"addGroupTemp","editGroupTemp":"editGroupTemp","setStoreArea":"setStoreArea","delGroupTemp":"delGroupTemp","searchSetSave":"searchSetSave","addCard":"addCard","editCard":"editCard","delCard":"delCard","sendCardLog":"sendCardLog","getCardLog":"getCardLog","addText":"addText","editText":"editText","delText":"delText","textAssignStore":"textAssignStore","textUsedStore":"textUsedStore","addImage":"addImage","editImage":"editImage","delImage":"delImage","imageAssignStore":"imageAssignStore","imageUsedStore":"imageUsedStore","addWeb":"addWeb","editWeb":"editWeb","delWeb":"delWeb","webAssignStore":"webAssignStore","webUsedStore":"webUsedStore","addVideo":"addVideo","editVideo":"editVideo","delVideo":"delVideo","videoAssignStore":"videoAssignStore","videoUsedStore":"videoUsedStore","addFile":"addFile","editFile":"editFile","delFile":"delFile","fileAssignStore":"fileAssignStore","fileUsedStore":"fileUsedStore","addApps":"addApps","editApps":"editApps","delApps":"delApps","appsAssignStore":"appsAssignStore","appsUsedStore":"appsUsedStore","saveGoodsSet":"saveGoodsSet","exportActiveUser":"exportActiveUser","exportLoginUser":"exportLoginUser","exportAreaLoginUser":"exportAreaLoginUser","multipleDelReport":"multipleDelReport","exportReport":"exportReport","reportDetail":"reportDetail","multipleDelReportDetail":"multipleDelReportDetail","delReportDetail":"delReportDetail","showReportDetail":"showReportDetail","multipleExportReport":"multipleExportReport","saveTaskSet":"saveTaskSet","monthTarget":"monthTarget","dayTarget":"dayTarget","exportMonthTask":"exportMonthTask","checkMonthTask":"checkMonthTask","multipleDelTask":"multipleDelTask","delTask":"delTask","exportStoreList":"exportStoreList","checkStoreList":"checkStoreList","exportStoreDetail":"exportStoreDetail","checkStoreDetail":"checkStoreDetail","exportStoreDetailPop":"exportStoreDetailPop","previewStoreDetail":"previewStoreDetail","exportGrTaskList":"exportGrTaskList","checkGrTaskList":"checkGrTaskList","exportTaskRecord":"exportTaskRecord","multipleDelTaskRecord":"multipleDelTaskRecord","checkTaskRecord":"checkTaskRecord","exportTaskDetail":"exportTaskDetail","multipleDelTaskDetail":"multipleDelTaskDetail","delTaskDetail":"delTaskDetail","resolveTaskDetail":"resolveTaskDetail","previewTaskDetail":"previewTaskDetail","exportTaskView":"exportTaskView","multipleDelTaskView":"multipleDelTaskView","checkTaskView":"checkTaskView","exportTaskViewDetail":"exportTaskViewDetail","multipleDelTaskViewDetail":"multipleDelTaskViewDetail","addSalutatory":"addSalutatory","editSalutatory":"editSalutatory","delSalutatory":"delSalutatory","refreshStoreMember":"refreshStoreMember","exportContact":"exportContact","checkContactDetail":"checkContactDetail","checkContactMemberDetail":"checkContactMemberDetail","refreshStoreInfo":"refreshStoreInfo","saveMemberSecret":"saveMemberSecret","addMemberAppsSecret":"addMemberAppsSecret","editMemberAppsSecret":"editMemberAppsSecret","delMemberAppsSecret":"delMemberAppsSecret","addAppsSecret":"addAppsSecret","getAppsSecret":"getAppsSecret","editAppsSecret":"editAppsSecret","delAppsSecret":"delAppsSecret","bindStoreList":"bindStoreList","refreshAdminList":"refreshAdminList"}
\ No newline at end of file

menu-data/create-menu-json.js

@@ -190,4 +190,21 @@ function createXls() {
     console.log('写入完成');
   });
 }
-createXls();
+function createButtonCodeJson(buttonData) {
+  let result = {};
+  Object.keys(buttonData).forEach(k => {
+    Object.keys(buttonData[k]).forEach(code => {
+      result[code] = code;
+    })
+  })
+  fs.writeFile(path.resolve(__dirname, './button-code.json'), JSON.stringify(result), (err) => {
+    if (err) {
+      console.log(err);
+      return;
+    }
+    console.log('写入完成');
+  })
+}
+// createXls();
+
+createButtonCodeJson(buttonData)

src/App.vue

 <template>
-  <div id="app">
+  <div id="app" v-loading="loading" style="min-height: 100vh">
     <transition name="fade" mode="out-in">
-      <router-view></router-view>
+      <router-view v-if="!loading" :menu-list="menuList"></router-view>
     </transition>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
+import errorMsg from '@/common/js/error.js';
+import { getRequest, postRequest } from '@/api/api.js';
+import router from '@/router';
+const whiteRoute = ['/login'];
+let toPath = '';
+let fromPath = '';
+router.beforeEach((to, from, next) => {
+  toPath = to.path;
+  fromPath = from.path;
+  // 如果从登录页登页面进来后，刷新一下页面，重新获取权限相关的数据
+  if (!sessionStorage.getItem('hbReload')) {
+    if (whiteRoute.includes(fromPath)) {
+      sessionStorage.setItem('hbReload', 1);
+      setTimeout(() => {
+        location.reload();
+      }, 50);
+    }
+  } else {
+    sessionStorage.removeItem('hbReload');
+  }
+  next();
+});
+window.myRouter = router;
 export default {
   name: 'App',
   data() {
-    return {};
+    return {
+      loading: true,
+      menuList: []
+    };
+  },
+  created() {
+    // 如果是登录页登页面，就不获取权限数据
+    if (whiteRoute.includes(toPath) || whiteRoute.includes(fromPath)) {
+      this.loading = false;
+      return;
+    } else {
+      this.getUserInfo().then(() => {
+        Promise.all([this.getRight(), this.getMenuList()]).finally(() => {
+          setTimeout(() => (this.loading = false), 200);
+        });
+      });
+    }
+  },
+  methods: {
+    getUserInfo() {
+      return postRequest('/haoban-manage3-web/get-login-info', {}).then(resp => {
+        const { errorCode, result } = resp.data || {};
+        if (errorCode != 1) {
+          errorMsg.errorMsg(resp.data);
+          return;
+        }
+        sessionStorage.setItem('userInfos', JSON.stringify(result));
+        if (result.enterpriseId) {
+          Vue.axios.defaults.headers.common['enterpriseId'] = result.enterpriseId;
+        }
+      });
+    },
+    getMenuList() {
+      return getRequest('/haoban-manage3-web/get-haoban-menu', {}).then(res => {
+        const { errorCode, result } = res.data || [];
+        if (errorCode != 1) {
+          errorMsg.errorMsg(res.data);
+          return;
+        }
+        if (!Array.isArray(result)) return;
+        this.menuList = result;
+        this.setIndexRoute(result);
+      });
+    },
+    getRight() {
+      return getRequest('/haoban-manage3-web/get-haoban-right', {}).then(resp => {
+        const { errorCode, result } = resp.data || {};
+        if (errorCode != 1) {
+          errorMsg.errorMsg(resp.data);
+          return;
+        }
+        this.checkButtonRight(result.button);
+        this.checkPageRight(result.menu, menu => consoleButtonCode(menu, result.button));
+        // 打印当前页面需要权限控制的按钮数据
+        function consoleButtonCode(menu, buttonList) {
+          if (menu && menu.menuCode) {
+            console.log(buttonList.filter(el => el.parentCode == menu.menuCode));
+          }
+        }
+      });
+    },
+    /**
+     * @description 校验按钮权限
+     */
+    checkButtonRight(rightList) {
+      // 按钮权限校验
+      Vue.prototype.$getButtonLimit = code => {
+        const btn = rightList.find(el => el.menuCode == code) || {};
+        return btn.hasRight == 1;
+      };
+    },
+    /**
+     * @description 校验页面访问权限
+     * @param {Array} rightList 所有需要权限控制的页面路径，hasRight为1时才有访问权限
+     */
+    checkPageRight(rightList, consoleButtonCode) {
+      // 页面访问权限校验
+      const menu = rightList.find(el => el.menuUrl == toPath.substr(1));
+      // 页面第一次打开后，校验权限的beforeEach还没有创建，所以需要手动校验一下页面权限
+      if (menu && menu.hasRight == 0) {
+        this.$router.push({ path: '/403' });
+      }
+      consoleButtonCode(menu);
+      router.beforeEach((to, from, next) => {
+        const menu = rightList.find(el => el.menuUrl == to.path.substr(1));
+        consoleButtonCode(menu);
+        if (menu && menu.hasRight == 0) {
+          return next({ path: '/403' });
+        }
+        next();
+      });
+    },
+    /**
+     * @description 设置/index路径重定向的路径，实现默认打开第一个有权限的页面
+     * @param {Array} menuList 菜单权限树数据
+     */
+    setIndexRoute(menuList) {
+      let path = '';
+      const routes = [{ path: '*', redirect: '/404' }];
+      menuList.some(first => {
+        if (first.hasRight && first.isShow && Array.isArray(first.childList)) {
+          first.childList.some(second => {
+            if (second.hasRight && second.isShow && Array.isArray(second.childList)) {
+              second.childList.some(third => {
+                if (third.hasRight && third.isShow) {
+                  path = third.menuUrl;
+                }
+                return third.hasRight && third.isShow;
+              });
+            }
+            return path;
+          });
+        }
+        return path;
+      });
+      if (path) {
+        routes.push({ path: '/index', redirect: '/' + path });
+      }
+      this.$router.addRoutes(routes);
+    }
   }
 };
 </script>

src/components/layout/index.vue

@@ -27,12 +27,17 @@ export default {
   name: 'DmHbLayout',
   components: { MainMenu, AsideMenu, BreadMenu },
   provide: () => provideData,
+  props: {
+    // 菜单树数据
+    menuList: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       breadShow: true,
       enterpriseId: '',
-      // 菜单树数据
-      menuList: [],
       // 菜单平铺数据
       flatMenuList: [],
       // 侧边栏菜单数据
@@ -45,16 +50,26 @@ export default {
       }
     };
   },
+  watch: {
+    menuList: {
+      immediate: true,
+      handler(list) {
+        this.flatMenuList = this.getFlatMenuList(list);
+        this.activedMenu = this.getActivedMenu(this.getMenuByPath(this.$route.path.slice(1)));
+      }
+    }
+  },
   created() {
-    provideData.layoutVm = this;
-    this.enterpriseId = JSON.parse(sessionStorage.getItem('userInfos') || '{}').enterpriseId;
-    this.$on('command', this.onCommand);
     this.$router.beforeEach((to, from, next) => {
       this.activedMenu = this.getActivedMenu(this.getMenuByPath(to.path.slice(1)));
       next();
     });
+    provideData.layoutVm = this;
+    this.enterpriseId = JSON.parse(sessionStorage.getItem('userInfos') || '{}').enterpriseId;
+    this.$on('command', this.onCommand);
+    // this.flatMenuList = this.getFlatMenuList(this.menuList);
+    // this.activedMenu = this.getActivedMenu(this.getMenuByPath(this.$route.path.slice(1)));
     this.getEnterpriseSecret();
-    this.getMenuList();
   },
   methods: {
     getEnterpriseSecret() {
@@ -76,20 +91,6 @@ export default {
         }
       });
     },
-    getMenuList() {
-      getRequest('/haoban-manage3-web/get-haoban-menu', {}).then(res => {
-        const { errorCode, result } = res.data || [];
-        if (errorCode != 1) {
-          errorMsg.errorMsg(res.data);
-          return;
-        }
-        if (!Array.isArray(result)) return;
-        this.menuList = result;
-        this.flatMenuList = this.getFlatMenuList(result);
-        this.activedMenu = this.getActivedMenu(this.getMenuByPath(this.$route.path.slice(1)));
-        this.setIndexRoute(result);
-      });
-    },
     getFlatMenuList(menuList) {
       return menuList.reduce((list, el) => {
         if (Array.isArray(el.childList)) {
@@ -111,28 +112,6 @@ export default {
     getMenuByPath(path) {
       return this.flatMenuList.find(el => el.menuUrl == path) || {};
     },
-    setIndexRoute(menuList) {
-      let path = '';
-      menuList.some(first => {
-        if (first.hasRight && first.isShow && Array.isArray(first.childList)) {
-          first.childList.some(second => {
-            if (second.hasRight && second.isShow && Array.isArray(second.childList)) {
-              second.childList.some(third => {
-                if (third.hasRight && third.isShow) {
-                  path = third.menuUrl;
-                }
-                return third.hasRight && third.isShow;
-              });
-            }
-            return path;
-          });
-        }
-        return path;
-      });
-      if (path) {
-        this.$router.addRoutes([{ path: '/index', redirect: '/' + path }]);
-      }
-    },
     onShowLoading(loading) {
       if (loading) {
         this.fullLoading.visible = true;

src/main.js

@@ -30,8 +30,7 @@ import vueOfficeUploadImage from '@gic-test/vue-office-upload-image';
 import htmlToPdf from '@/components/utils/htmlToPdf';
 import VueAMap from 'vue-amap';
 import Vue from 'vue';
-import { postRequest } from '@/api/api.js';
-import errorMsg from '@/common/js/error.js';
+import buttonCode from '../menu-data/button-code.json';
 
 // Vue.use(contentmenu);
 Vue.use(VueAMap);
@@ -76,130 +75,14 @@ router.beforeEach((to, from, next) => {
   }
   next();
 });
-Vue.prototype.$buttonCode = {
-  multipleAssign: 'multipleAssign',
-  assign: 'assign',
-  syncTagLog: 'syncTagLog',
-  willSyncTag: 'willSyncTag',
-  groupExpire: 'groupExpire',
-  syncGroup: 'syncGroup',
-  addGroupTemp: 'addGroupTemp',
-  editGroupTemp: 'editGroupTemp',
-  setStoreArea: 'setStoreArea',
-  delGroupTemp: 'delGroupTemp',
-  searchSetSave: 'searchSetSave',
-  addCard: 'addCard',
-  editCard: 'editCard',
-  delCard: 'delCard',
-  sendCardLog: 'sendCardLog',
-  getCardLog: 'getCardLog',
-  addText: 'addText',
-  editText: 'editText',
-  delText: 'delText',
-  textAssignStore: 'textAssignStore',
-  addImage: 'addImage',
-  editImage: 'editImage',
-  delImage: 'delImage',
-  imageAssignStore: 'imageAssignStore',
-  addWeb: 'addWeb',
-  editWeb: 'editWeb',
-  delWeb: 'delWeb',
-  webAssignStore: 'webAssignStore',
-  addVideo: 'addVideo',
-  editVideo: 'editVideo',
-  delVideo: 'delVideo',
-  videoAssignStore: 'videoAssignStore',
-  addFile: 'addFile',
-  editFile: 'editFile',
-  delFile: 'delFile',
-  fileAssignStore: 'fileAssignStore',
-  addApps: 'addApps',
-  editApps: 'editApps',
-  delApps: 'delApps',
-  appsAssignStore: 'appsAssignStore',
-  saveGoodsSet: 'saveGoodsSet',
-  exportActiveUser: 'exportActiveUser',
-  exportLoginUser: 'exportLoginUser',
-  exportAreaLoginUser: 'exportAreaLoginUser',
-  multipleDelReport: 'multipleDelReport',
-  exportReport: 'exportReport',
-  reportDetail: 'reportDetail',
-  multipleDelReportDetail: 'multipleDelReportDetail',
-  delReportDetail: 'delReportDetail',
-  showReportDetail: 'showReportDetail',
-  multipleExportReport: 'multipleExportReport',
-  saveTaskSet: 'saveTaskSet',
-  monthTarget: 'monthTarget',
-  dayTarget: 'dayTarget',
-  exportMonthTask: 'exportMonthTask',
-  checkMonthTask: 'checkMonthTask',
-  multipleDelTask: 'multipleDelTask',
-  delTask: 'delTask',
-  exportStoreList: 'exportStoreList',
-  checkStoreList: 'checkStoreList',
-  exportStoreDetail: 'exportStoreDetail',
-  checkStoreDetail: 'checkStoreDetail',
-  exportStoreDetailPop: 'exportStoreDetailPop',
-  previewStoreDetail: 'previewStoreDetail',
-  exportGrTaskList: 'exportGrTaskList',
-  checkGrTaskList: 'checkGrTaskList',
-  exportTaskRecord: 'exportTaskRecord',
-  multipleDelTaskRecord: 'multipleDelTaskRecord',
-  checkTaskRecord: 'checkTaskRecord',
-  exportTaskDetail: 'exportTaskDetail',
-  multipleDelTaskDetail: 'multipleDelTaskDetail',
-  delTaskDetail: 'delTaskDetail',
-  resolveTaskDetail: 'resolveTaskDetail',
-  previewTaskDetail: 'previewTaskDetail',
-  exportTaskViewDetail: 'exportTaskViewDetail',
-  multipleDelTaskViewDetail: 'multipleDelTaskViewDetail',
-  addSalutatory: 'addSalutatory',
-  editSalutatory: 'editSalutatory',
-  delSalutatory: 'delSalutatory',
-  refreshStoreMember: 'refreshStoreMember',
-  exportContact: 'exportContact',
-  checkContactDetail: 'checkContactDetail',
-  checkContactMemberDetail: 'checkContactMemberDetail',
-  refreshStoreInfo: 'refreshStoreInfo',
-  saveMemberSecret: 'saveMemberSecret',
-  addMemberAppsSecret: 'addMemberAppsSecret',
-  editMemberAppsSecret: 'editMemberAppsSecret',
-  delMemberAppsSecret: 'delMemberAppsSecret',
-  addAppsSecret: 'addAppsSecret',
-  getAppsSecret: 'getAppsSecret',
-  editAppsSecret: 'editAppsSecret',
-  delAppsSecret: 'delAppsSecret',
-  bindStoreList: 'bindStoreList',
-  refreshAdminList: 'refreshAdminList'
-}
-Vue.prototype.$getButtonLimit = (code) => {
-  return !!Vue.prototype.$buttonCode[code];
-}
+// 将按钮code挂到vue的原型上，供页面中埋点使用
+Vue.prototype.$buttonCode = buttonCode;
 
-postRequest('/haoban-manage3-web/get-login-info', {}).then(resp => {
-  // 正常情况下enterpriseId必定存在
-  // superManagerFlag 1：超管
-  // 如果enterpriseId不存在，而且不是超管，弹窗报错并且不进入页面
-  const { errorCode, result } = resp.data || {};
-  if (errorCode != 1) {
-    errorMsg.errorMsg(resp.data);
-    return;
-  }
-  sessionStorage.setItem('userInfos', JSON.stringify(result));
-  /**
-   * 获取好办 企业 id
-   */
-  if (!!sessionStorage.getItem('userInfos')) {
-    let haobanSign = JSON.parse(sessionStorage.getItem('userInfos')).enterpriseId;
-    haobanSign ? (Vue.axios.defaults.headers.common['enterpriseId'] = haobanSign) : '';
-  }
-}).finally(() => {
-  /* eslint-disable no-new */
-  new Vue({
-    el: '#app',
-    router,
-    store,
-    components: { App },
-    template: '<App/>'
-  });
-});
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  components: { App },
+  template: '<App/>'
+})

src/router/index.js

@@ -439,8 +439,7 @@ export const constantRouterMap = [
         path: '/500',
         name: 'error500',
         component: errorPage
-    },
-    { path: '*', redirect: '/404', hidden: true }
+    }
 ];
 export default new Router({
     // mode:'history',