feat：权限（部分）

2020-12-04 20:53:58 +08:00
parent 57388460e2
commit c60086e1b6
9 changed files with 185 additions and 64 deletions
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="header">
-    <div class="logo link" @click="jumpTo('/overview')">
+    <div @click="jumpTo('overview')" class="logo link">
      <img height="34" src="../../assets/img/logo1-2.png"/>
      <span class="header-system-name">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</span>
    </div>
@@ -10,7 +10,7 @@
      active="1"
      unique-opened
    >
-      <el-submenu :index="'-3'" popper-class="nz-submenu" class="icon-menu-item" :disabled="!linkData||linkData.length <1" >
+      <el-submenu :disabled="!linkData||linkData.length <1" class="icon-menu-item" index="100" popper-class="nz-submenu" >
        <template slot="title">
          <i class="nz-icon-navmore nz-icon" style="font-size: 17px;"></i>
        </template>
@@ -20,13 +20,13 @@
          </el-menu-item>
        </template>
      </el-submenu>
-      <el-submenu :index="'-1'" class="icon-menu-item" popper-class="display-none">
+      <el-submenu class="icon-menu-item" index="101" popper-class="display-none">
        <div slot="title" class="el-submenu__title" @click="cli" >
          <i class="nz-icon nz-icon-cli" style="font-size: 18px;"></i>
          <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
        </div>
      </el-submenu>
-      <el-submenu index="0" popper-class="nz-submenu" class="icon-menu-item">
+      <el-submenu class="icon-menu-item" index="102" popper-class="nz-submenu">
        <template slot="title">
         <i class="nz-icon-create-square nz-icon" style="font-size: 18px;"></i>
        </template>
@@ -38,10 +38,22 @@
          </el-menu-item>
        </template>
      </el-submenu>
-      <el-menu-item :index="'-2'" >
+      <el-menu-item index="103" >
        <div class="vertical-line" ></div>
      </el-menu-item>
-      <el-submenu index="1" popper-class="nz-submenu">
+
+      <el-submenu :index="`${index}`" :key="index" popper-class="nz-submenu" v-for="(menu, index) in getMenuList">
+        <template slot="title">
+          <div :class ="menuIsActive(menu, 'parent')" @click="jumpTo(menu.route)" >
+            {{$t(menu.i18n)}}
+          </div>
+        </template>
+        <el-menu-item :index="`${index}-${subIndex}`" :key="`${index}-${subIndex}`" v-for="(subMenu, subIndex) in menu.children">
+          <div :class="menuIsActive(subMenu)" @click="jumpTo(subMenu.route)" >{{$t(subMenu.i18n)}}</div>
+        </el-menu-item>
+      </el-submenu>
+
+      <!--<el-submenu index="1" popper-class="nz-submenu">
        <template slot="title">
          <div @click="jumpTo('/overview')" :class ="(route == '/overview' ||route == '/panel' || route == '/explore') ? 'menu-active' :'' " >
            {{$t('overall.dashboard')}}
@@ -57,7 +69,6 @@
          <div @click="jumpTo('/explore')" :class="{'menu-item-active' :route == '/explore'}">{{$t('dashboard.metricPreview.title')}}</div>
        </el-menu-item>
      </el-submenu>
-
      <el-submenu index="3" popper-class="nz-submenu">
        <template slot="title">
          <div v-if="assetData.length == 0" @click="jumpToAsset()">{{$t('overall.asset')}}</div>
@@ -168,7 +179,7 @@
        <el-menu-item index="6-4">
          <div @click="logout">{{$t('overall.signOut')}}</div>
        </el-menu-item>
-      </el-submenu>
+      </el-submenu>-->
    </el-menu>

    <transition name="right-box">
@@ -324,7 +335,7 @@
       * @param parentMenu 菜单大类
       * */
      jumpTo(route) {
-        if (route != "/asset") {
+        if (route != "asset") {
          this.activeItemIndexes = [];
        }
        this.$router.push({
@@ -489,7 +500,6 @@
        this.rightBox.project.show = true;
      },
      logout() {
-        localStorage.setItem("nz-parent-menu", "dashboards");
        this.$get('logout');
        this.jumpTo('/login');
      },
@@ -526,6 +536,28 @@
          history.pushState(null, null, document.URL);
          window.addEventListener('popstate', this.cancel, false);
        }
+      },
+      menuIsActive() {
+        return function(menu, isParent) {
+          if (isParent) {
+            let isCurrent = menu.children.some(sub => {
+              return sub.route == this.route;
+            });
+            if (isCurrent) {
+              return "menu-active";
+            } else {
+              return "";
+            }
+          } else {
+            if (menu.route == this.route) {
+              if (isCurrent) {
+                return "menu-item-active";
+              } else {
+                return "";
+              }
+            }
+          }
+        };
      }
    },
    mounted() {
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -10,8 +10,8 @@ export const staticMenus = {
      {route: '/model', name: i18n.t('config.model.model')},
      {route: '/mib', name: i18n.t('config.mib.mib')},
      {route: '/system', name: i18n.t('config.system.system')},
-      {route: '/terminallog', name: i18n.t('config.terminallog.terminallog')},
-      {route: '/operationlog', name: i18n.t('config.operationlog.operationlog')},
+      {route: '/terminalLog', name: i18n.t('config.terminallog.terminallog')},
+      {route: '/operationLog', name: i18n.t('config.operationlog.operationlog')},
      {route: '/about', name: i18n.t('overall.about')},
    ],
  },
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -31,6 +31,7 @@

 <script>
 import bus from '../../libs/bus';
+import {mapActions} from "vuex";
 export default {
  name: "login",
  data() {
@@ -45,30 +46,17 @@ export default {
    }
  },
  methods: {
+    ...mapActions(["loginSuccess"]),
    login() {
      if (this.validateLogin()&&(this.$route.path=='/'||this.$route.path=='/login')) {
-        this.$post('sys/login', (this.loginData)).then(res => {
+        this.$post('sys/login', this.loginData).then(res => {
          if (res.code == 200) {
            //登录成功，记录用户名、token和lang
-            sessionStorage.setItem("nz-token", res.data.token);
            sessionStorage.setItem("nz-username", this.loginData.username);
            localStorage.setItem("nz-username", this.loginData.username);
            localStorage.setItem('nz-language', this.lang);
-            localStorage.setItem('nz-sys-name',res.data.systemName);
-            localStorage.setItem('nz-sys-timezone',res.data.timezone);
-            localStorage.setItem('nz-sys-default-cabinet-usize',res.data.defaultCabinetUsize);
-            localStorage.setItem('nz-sys-max-terminal-num',res.data.maxTerminalNum);
-            localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwitch);
-            localStorage.setItem('nz-parent-menu', "dashboards");
-            localStorage.setItem('nz-menu', "/overview");
            this.$i18n.locale = this.lang;
-            bus.$emit('login');
-            this.$router.push({
-              path: "/overview",
-              query: {
-                t: +new Date()
-              }
-            });
+            this.loginSuccess(res);
          } else {
            this.$message.error(res.msg);
          }
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -1,17 +1,6 @@
 import axios from 'axios'
-import router from './router'
-
-//import qs from 'qs'
-//import he from "element-ui/src/locale/lang/he"; //引入数据格式化
-//axios.defaults.baseURL = 'http://localhost:8088/nz-admin';
-// axios.defaults.baseURL = 'http://192.168.41.101:8088/nz-admin';
-//axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';

 axios.interceptors.request.use(config => {
-      // config.headers = {
-      //   "Content-Type": 'application/x-www-form-urlencoded',
-      // }
-      // config.data = qs.stringify(config.data);
      let token = sessionStorage.getItem('nz-token');
      if (token) {
          config.headers['Authorization'] = token //请求头token
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -14,6 +14,7 @@ import App from './App'
 import router from './router'
 import VueResource from 'vue-resource'
 import axios from 'axios';
+import "./permission";

 import plTable from 'pl-table'
 import 'pl-table/themes/index.css'
@@ -123,8 +124,20 @@ Vue.mixin({
          }
        })
      },
+      hasButton(button) {
+        return this.$store.buttonList.indexOf(button) > -1;
+      }
+    },
+    computed: {
+      getMenuList() {
+        console.info(this.$store.state.user.menuList);
+        return this.$store.state.user.menuList;
+      },
+      getButtonList() {
+        return this.$store.state.buttonList;
+      }
    }
-})
+});


 Vue.config.productionTip = false;
@@ -143,8 +156,11 @@ window.vm = new Vue({
  i18n,
  store,
  components: {App},
-  template: '<App/>'
-})
+  template: '<App/>',
+  mounted() {
+    //store.commit()
+  }
+});

 export default vm;

--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -0,0 +1,53 @@
+import Vue from 'vue';
+import router from './router';
+import store from './store';
+import {post} from './http';
+
+const loginWhiteList = ['/login']; // 免登陆白名单
+const permissionWhiteList = ['/login']; // 权限白名单
+
+router.beforeEach((to, from, next) => {
+  if (sessionStorage.getItem('nz-token')) {
+    if (loginWhiteList.indexOf(to.path) !== -1) {
+      next();
+    } else {
+      new Promise(resolve => {
+        if (store.getters.menuList.length === 0) {
+          post("/sys/user/permissions", {token: sessionStorage.getItem("nz-token")}).then(res => {
+            store.commit("setMenuList", res.data.menus);
+            store.commit("setButtonList", res.data.buttons);
+            store.commit("setRoleList", res.data.roles);
+            resolve();
+          });
+        } else {
+          resolve();
+        }
+      }).then(res => {
+        let has = hasMenu(store.getters.menuList, to.path);
+        if (has) {
+          next();
+        } else {
+          next({ path: '/login'})
+        }
+      });
+    }
+  } else {
+    if (permissionWhiteList.indexOf(to.path) !== -1) {
+      next();
+    } else {
+      next({path: '/login'})
+    }
+  }
+});
+
+function hasMenu(menuList, route) {
+  return menuList.some(menu => {
+    if (menu.route == route) {
+      return true;
+    } else {
+      if (menu.children) {
+        hasMenu(menu.children, route);
+      }
+    }
+  });
+}
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -13,21 +13,6 @@ export default new Router({
      path: '/login',
      component: resolve => require(['../components/common/login.vue'], resolve),
    },
-    {
-      path: '/terminal',
-      name: "terminal",
-      component: resolve => require(['../components/page/asset/WebSSH.vue'], resolve),
-    },
-    {
-      path: '/cloneChat',
-      name: "cloneChat",
-      component: resolve => require(['../components/page/asset/cloneChat.vue'], resolve),
-    },
-    {
-      path: '/newChat',
-      name: "newChat",
-      component: resolve => require(['../components/page/asset/newChat.vue'], resolve),
-    },
    {
      path: '/',
      component: resolve => require(['../components/common/home.vue'], resolve),
@@ -36,16 +21,12 @@ export default new Router({
          path: '/panel',
          component: resolve => require(['../components/page/dashboard/panel.vue'], resolve),
        },
-        {
-          path: '/metricPreview',
-          component: resolve => require(['../components/page/dashboard/metricPreview.vue'], resolve),
-        },
        {
          path: '/explore',
          component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve),
        },
        {
-          path: '/overview',
+          path: 'overview',
          component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
        },
        {
@@ -73,11 +54,11 @@ export default new Router({
          component: resolve => require(['../components/page/config/model.vue'], resolve),
        },
        {
-          path: '/terminallog',
+          path: '/terminalLog',
          component: resolve => require(['../components/page/config/terminallog.vue'], resolve),
        },
        {
-          path: '/operationlog',
+          path: '/operationLog',
          component: resolve => require(['../components/page/config/operationlog.vue'], resolve),
        },
        {
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import user from "./user"

 Vue.use(Vuex);
 const store = new Vuex.Store({
+  modules: {
+    user
+  },
  state: {
    /* 监听对象变化，用于顶部菜单与底部内容的同步 */
    currentProject: {id: "", name: "", remark: ""},
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -0,0 +1,58 @@
+import {post} from '../http';
+import router from '../router';
+import bus from '../libs/bus';
+
+const user = {
+  state: {
+    menuList: [],
+    buttonList: [],
+    roleList: []
+  },
+  mutations: {
+    setMenuList(state, menuList) {
+      state.menuList = [...menuList];
+    },
+    setButtonList(state, buttonList) {
+      state.buttonList = [...buttonList];
+    },
+    setRoleList(state, roleList) {
+      state.roleList = [...roleList];
+    }
+  },
+  getters: {
+    menuList(state) {
+      return state.menuList;
+    },
+    buttonList(state) {
+      return state.buttonList;
+    },
+    roleList(state) {
+      return state.roleList;
+    },
+  },
+  actions: {
+    loginSuccess(store, res) {
+      sessionStorage.setItem("nz-token", res.data.token);
+      localStorage.setItem('nz-sys-name',res.data.systemName);
+      localStorage.setItem('nz-sys-timezone',res.data.timezone);
+      localStorage.setItem('nz-sys-default-cabinet-usize',res.data.defaultCabinetUsize);
+      localStorage.setItem('nz-sys-max-terminal-num',res.data.maxTerminalNum);
+      localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwitch);
+
+      post("/sys/user/permissions", {token: res.data.token}).then(res => {
+        store.commit("setMenuList", res.data.menus);
+        store.commit("setButtonList", res.data.buttons);
+        store.commit("setRoleList", res.data.roles);
+
+        bus.$emit("login");
+        router.push({
+          path: "/overview",
+          query: {
+            t: +new Date()
+          }
+        });
+      });
+    }
+  },
+};
+export default user;