权限天骄

src/constants/navs.js

@@ -20,8 +20,89 @@ export const navs = [
 ];
 
 export const ROLE_NAV = {
-  DEV: [""],
-  TEST: [""],
-  OPS: ["admin", "AppManage"],
-  ADMIN: ["admin", "UserManage", "AppManage"]
+  DEV: [
+    { url: "admin" },
+    {
+      url: "AppManage",
+      privilege: [
+        "app_version",
+        "app_version_add",
+        "app_version_edit",
+        "app_version_archive",
+        "app_version_master",
+        "app_config",
+        "app_config_baseline",
+        "app_config_baseline_edit",
+        "app_config_baseline_item_edit",
+        "app_config_test",
+        "app_config_prod"
+      ]
+    }
+  ],
+  TEST: [
+    { url: "admin" },
+    {
+      url: "AppManage",
+      privilege: [
+        "app_version",
+        "app_config",
+        "app_config_baseline",
+        "app_config_test",
+        "app_config_test_item_add",
+        "app_config_test_item_edit",
+        "app_config_prod"
+      ]
+    }
+  ],
+  OPS: [
+    { url: "admin" },
+    {
+      url: "AppManage",
+      privilege: [
+        "app_config",
+        "app_config_baseline",
+        "app_config_test",
+        "app_config_test_item_add",
+        "app_config_test_item_edit",
+        "app_config_prod",
+        "app_config_prod_item_add",
+        "app_config_prod_item_edit"
+      ]
+    }
+  ],
+  ADMIN: [
+    { url: "admin" },
+    {
+      url: "AppManage",
+      privilege: [
+        "app_add",
+        "app_edit",
+        "app_user",
+        "app_user_bind",
+        "app_module",
+        "app_module_add",
+        "app_module_edit",
+        "app_module_enable",
+        "app_version",
+        "app_version_add",
+        "app_version_edit",
+        "app_version_archive",
+        "app_version_master",
+        "app_env",
+        "app_env_add",
+        "app_env_edit",
+        "app_config",
+        "app_config_baseline",
+        "app_config_baseline_edit",
+        "app_config_baseline_item_edit",
+        "app_config_test",
+        "app_config_test_item_add",
+        "app_config_test_item_edit",
+        "app_config_prod",
+        "app_config_prod_item_add",
+        "app_config_prod_item_edit"
+      ]
+    },
+    { url: "UserManage", privilege: ["add", "edit", "resetPwd"] }
+  ]
 };

src/main.js

@@ -16,7 +16,7 @@ import "./assets/styles/index.scss";
 import JsonViewr from "vue-json-viewer";
 
 Vue.use(ElementUI, { size: "small" });
-Vue.use(VueLocalStorage, { storage: "session" });
+Vue.use(VueLocalStorage, { namespace: "vs_", storage: "session" });
 Vue.use(globalVuePlugins);
 Vue.use(JsonViewr);
 

src/plugins/mixins.js → src/mixins/common.js

@@ -1,8 +1,8 @@
 export default {
   methods: {
-    deletePageLastItem() {
+    deletePageLastItem(len = 1) {
       let page = this.current || 1;
-      if (this.$refs.TableList.data.length === 1) {
+      if (this.$refs.TableList.data.length === len) {
         page = page > 1 ? page - 1 : 1;
       }
       this.toPage && this.toPage(page);
@@ -13,6 +13,11 @@ export default {
     getRouterPath(location) {
       const { href } = this.$router.resolve(location);
       return href;
+    },
+    indexMethod(index) {
+      const current = this.current || 1;
+      const size = this.size || 10;
+      return (current - 1) * size + index + 1;
     }
   }
 };

src/mixins/privilege.js

@@ -0,0 +1,8 @@
+export default {
+  methods: {
+    checkPrivilege(field) {
+      const routerPrivileges = this.$store.state.privilegeMap[this.$route.name];
+      return routerPrivileges && routerPrivileges.has(field);
+    }
+  }
+};

src/mixins/timeMixin.js

@@ -0,0 +1,17 @@
+export default {
+  data() {
+    return {
+      setTs: []
+    };
+  },
+  methods: {
+    addSetTime(action, time = 1 * 1000) {
+      this.setTs.push(setTimeout(action, time));
+    },
+    clearSetTs() {
+      if (!this.setTs.length) return;
+      this.setTs.forEach(t => clearTimeout(t));
+      this.setTs = [];
+    }
+  }
+};

src/modules/admin/components/AppConfigManage.vue

@@ -37,7 +37,11 @@
             <el-button type="primary" icon="ios-search" @click="search"
               >查询</el-button
             >
-            <el-button type="success" icon="md-add" @click="toUpdate"
+            <el-button
+              v-if="checkPrivilege('app_config_baseline_edit')"
+              type="success"
+              icon="md-add"
+              @click="toUpdate"
               >配置基线修改</el-button
             >
           </el-form-item>
@@ -46,19 +50,25 @@
 
       <div class="mb-4 tab-btns tab-nowrap">
         <el-button
+          v-if="checkPrivilege('app_config_baseline')"
           size="medium"
           :type="filter.envId == null ? 'primary' : 'default'"
           @click="selectEnv({ id: null })"
           >基线
         </el-button>
-        <el-button
-          v-for="env in envList"
-          :key="env.id"
-          size="medium"
-          :type="filter.envId == env.id ? 'primary' : 'default'"
-          @click="selectEnv(env)"
-          >{{ env.name }}
-        </el-button>
+        <template v-for="env in envList">
+          <el-button
+            v-if="
+              (checkPrivilege('app_config_test') && env.type === 'TEST') ||
+                (checkPrivilege('app_config_prod') && env.type === 'PROD')
+            "
+            :key="env.id"
+            size="medium"
+            :type="filter.envId == env.id ? 'primary' : 'default'"
+            @click="selectEnv(env)"
+            >{{ env.name }}
+          </el-button>
+        </template>
       </div>
 
       <div class="config-body">
@@ -89,7 +99,7 @@
                 {{ group.name | groupNameFilter }}
               </h3>
               <el-button
-                v-if="group.name !== 'custom' && !IS_BASELINE"
+                v-if="checkAddPrivilege(group)"
                 class="btn-success"
                 type="text"
                 @click="toAddGroupConfigItem(group)"
@@ -111,7 +121,7 @@
                   <span>{{ item.value }}</span>
                   <span class="cont-mode">[{{ modeMap[item.mode] }}]</span>
                   <el-button
-                    v-if="item.mode !== 'READONLY'"
+                    v-if="checkEditPrivilege(item)"
                     class="btn-primary"
                     type="text"
                     @click="toEdit(item)"
@@ -127,6 +137,7 @@
 
     <!-- UpdateAppBaseline -->
     <update-app-baseline
+      v-if="checkPrivilege('app_config_baseline_edit')"
       ref="UpdateAppBaseline"
       :data="filter"
       @modified="baselineModified"
@@ -213,6 +224,7 @@ export default {
       configModes: [],
       modeMap: {},
       envList: [],
+      curEnv: {},
       configGroups: [],
       curGroupForAdd: null,
       groupConfigList: []
@@ -250,6 +262,24 @@ export default {
       this.envList = [];
       this.groupConfigList = [];
     },
+    checkAddPrivilege(group) {
+      const privilege =
+        (this.checkPrivilege("app_config_test_item_add") &&
+          this.curEnv.type === "TEST") ||
+        (this.checkPrivilege("app_config_prod_item_add") &&
+          this.curEnv.type === "PROD");
+      return group.name !== "custom" && !this.IS_BASELINE && privilege;
+    },
+    checkEditPrivilege(item) {
+      const privilege =
+        (this.checkPrivilege("app_config_test_item_edit") &&
+          this.curEnv.type === "TEST") ||
+        (this.checkPrivilege("app_config_prod_item_edit") &&
+          this.curEnv.type === "PROD") ||
+        (this.checkPrivilege("app_config_baseline_item_edit") &&
+          this.IS_BASELINE);
+      return item.mode !== "READONLY" && privilege;
+    },
     cancel() {
       this.modalIsShow = false;
     },
@@ -280,6 +310,7 @@ export default {
       this.configGroups = data || [];
     },
     selectEnv(env) {
+      this.curEnv = env;
       this.filter.envId = env.id;
       this.search();
     },

src/modules/admin/components/AppEnvManage.vue

@@ -22,7 +22,11 @@
             <el-button type="primary" icon="ios-search" @click="getList"
               >查询</el-button
             >
-            <el-button type="success" icon="md-add" @click="toAdd"
+            <el-button
+              v-if="checkPrivilege('app_env_add')"
+              type="success"
+              icon="md-add"
+              @click="toAdd"
               >新增</el-button
             >
           </el-form-item>
@@ -49,6 +53,7 @@
           <el-table-column label="操作" width="100" class-name="action-column">
             <template slot-scope="scope">
               <el-button
+                v-if="checkPrivilege('app_env_edit')"
                 class="btn-primary"
                 type="text"
                 @click="toEdit(scope.row)"
@@ -62,6 +67,7 @@
 
     <!-- ModifyAppEnv -->
     <modify-app-env
+      v-if="checkPrivilege('app_env_add') || checkPrivilege('app_env_edit')"
       ref="ModifyAppEnv"
       :instance="curRow"
       :types="envTypes"

src/modules/admin/components/AppModuleManage.vue

@@ -39,7 +39,11 @@
             <el-button type="primary" icon="ios-search" @click="getList"
               >查询</el-button
             >
-            <el-button type="success" icon="md-add" @click="toAdd"
+            <el-button
+              v-if="checkPrivilege('app_module_add')"
+              type="success"
+              icon="md-add"
+              @click="toAdd"
               >新增</el-button
             >
           </el-form-item>
@@ -72,12 +76,14 @@
           <el-table-column label="操作" width="100" class-name="action-column">
             <template slot-scope="scope">
               <el-button
+                v-if="checkPrivilege('app_module_edit')"
                 class="btn-primary"
                 type="text"
                 @click="toEdit(scope.row)"
                 >编辑</el-button
               >
               <el-button
+                v-if="checkPrivilege('app_module_enable')"
                 :class="scope.row.enable ? 'btn-danger' : 'btn-primary'"
                 type="text"
                 @click="toEnable(scope.row)"
@@ -91,6 +97,9 @@
 
     <!-- ModifyAppModule -->
     <modify-app-module
+      v-if="
+        checkPrivilege('app_module_add') || checkPrivilege('app_module_edit')
+      "
       ref="ModifyAppModule"
       :instance="curRow"
       @modified="getList"

src/modules/admin/components/AppUserManage.vue

@@ -60,6 +60,7 @@
           <el-table-column class-name="action-column" label="操作" width="80">
             <template slot-scope="scope">
               <el-button
+                v-if="checkPrivilege('app_user_bind')"
                 :class="scope.row.isBind ? 'btn-danger' : 'btn-primary'"
                 type="text"
                 @click="toBind(scope.row)"

src/modules/admin/components/AppVersionManage.vue

@@ -36,7 +36,11 @@
             <el-button type="primary" icon="ios-search" @click="toPage(1)"
               >查询</el-button
             >
-            <el-button type="success" icon="md-add" @click="toAdd"
+            <el-button
+              v-if="checkPrivilege('app_version_add')"
+              type="success"
+              icon="md-add"
+              @click="toAdd"
               >新增</el-button
             >
           </el-form-item>
@@ -80,18 +84,21 @@
           <el-table-column label="操作" width="120" class-name="action-column">
             <template slot-scope="scope">
               <el-button
+                v-if="checkPrivilege('app_version_edit')"
                 class="btn-primary"
                 type="text"
                 @click="toEdit(scope.row)"
                 >编辑</el-button
               >
               <el-button
+                v-if="checkPrivilege('app_version_archive')"
                 :class="scope.row.archived ? 'btn-danger' : 'btn-primary'"
                 type="text"
                 @click="toArchived(scope.row)"
                 >{{ scope.row.archived ? "取消归档" : "归档" }}</el-button
               >
               <el-button
+                v-if="checkPrivilege('app_version_master')"
                 class="btn-primary"
                 type="text"
                 :disabled="scope.row.id === curMasterVersionId"
@@ -117,6 +124,9 @@
 
     <!-- ModifyAppVersion -->
     <modify-app-version
+      v-if="
+        checkPrivilege('app_version_add') || checkPrivilege('app_version_edit')
+      "
       ref="ModifyAppVersion"
       :instance="curRow"
       @modified="getList"

src/modules/admin/views/AppManage.vue

@@ -15,7 +15,11 @@
           <el-button type="primary" icon="ios-search" @click="toPage(1)"
             >查询</el-button
           >
-          <el-button type="success" icon="md-add" @click="toAdd"
+          <el-button
+            v-if="checkPrivilege('app_add')"
+            type="success"
+            icon="md-add"
+            @click="toAdd"
             >新增</el-button
           >
         </el-form-item>
@@ -39,7 +43,12 @@
             scope.row.updateTime | timestampFilter
           }}</span>
         </el-table-column>
-        <el-table-column label="操作" width="80" class-name="action-column">
+        <el-table-column
+          v-if="checkPrivilege('app_edit')"
+          label="操作"
+          width="80"
+          class-name="action-column"
+        >
           <template slot-scope="scope">
             <el-button
               class="btn-primary"
@@ -52,30 +61,35 @@
         <el-table-column label="管理" width="220" class-name="action-column">
           <template slot-scope="scope">
             <el-button
+              v-if="checkPrivilege('app_user')"
               class="btn-primary"
               type="text"
               @click="toEditUser(scope.row)"
               >用户</el-button
             >
             <el-button
+              v-if="checkPrivilege('app_module')"
               class="btn-primary"
               type="text"
               @click="toEditModule(scope.row)"
               >模块</el-button
             >
             <el-button
+              v-if="checkPrivilege('app_version')"
               class="btn-primary"
               type="text"
               @click="toEditVersion(scope.row)"
               >版本</el-button
             >
             <el-button
+              v-if="checkPrivilege('app_env')"
               class="btn-primary"
               type="text"
               @click="toEditEnv(scope.row)"
               >环境</el-button
             >
             <el-button
+              v-if="checkPrivilege('app_config')"
               class="btn-primary"
               type="text"
               @click="toEditConfig(scope.row)"
@@ -98,22 +112,44 @@
     </div>
 
     <!-- modify-app -->
-    <modify-app ref="ModifyApp" :instance="curRow" @modified="getList">
+    <modify-app
+      v-if="checkPrivilege('app_add') || checkPrivilege('app_edit')"
+      ref="ModifyApp"
+      :instance="curRow"
+      @modified="getList"
+    >
     </modify-app>
     <!-- AppUserManage -->
-    <app-user-manage ref="AppUserManage" :app="curRow"></app-user-manage>
+    <app-user-manage
+      v-if="checkPrivilege('app_user')"
+      ref="AppUserManage"
+      :app="curRow"
+    ></app-user-manage>
     <!-- AppModuleManage -->
-    <app-module-manage ref="AppModuleManage" :app="curRow"></app-module-manage>
+    <app-module-manage
+      v-if="checkPrivilege('app_module')"
+      ref="AppModuleManage"
+      :app="curRow"
+    ></app-module-manage>
     <!-- AppVersionManage -->
     <app-version-manage
+      v-if="checkPrivilege('app_version')"
       ref="AppVersionManage"
       :app="curRow"
       @master-change="getList"
     ></app-version-manage>
     <!-- AppEnvManage -->
-    <app-env-manage ref="AppEnvManage" :app="curRow"></app-env-manage>
+    <app-env-manage
+      v-if="checkPrivilege('app_env')"
+      ref="AppEnvManage"
+      :app="curRow"
+    ></app-env-manage>
     <!-- AppConfigManage -->
-    <app-config-manage ref="AppConfigManage" :app="curRow"></app-config-manage>
+    <app-config-manage
+      v-if="checkPrivilege('app_config')"
+      ref="AppConfigManage"
+      :app="curRow"
+    ></app-config-manage>
   </div>
 </template>
 

src/modules/admin/views/UserManage.vue

@@ -29,7 +29,9 @@
 
         <el-form-item label-width="0px">
           <el-button type="primary" @click="toPage(1)">查询</el-button>
-          <el-button type="success" @click="toAdd">新增</el-button>
+          <el-button v-if="checkPrivilege('add')" type="success" @click="toAdd"
+            >新增</el-button
+          >
         </el-form-item>
       </el-form>
     </div>
@@ -58,12 +60,14 @@
         >
           <template slot-scope="scope">
             <el-button
+              v-if="checkPrivilege('edit')"
               class="btn-primary"
               type="text"
               @click="toEdit(scope.row)"
               >编辑</el-button
             >
             <el-button
+              v-if="checkPrivilege('resetPwd')"
               class="btn-danger"
               type="text"
               @click="toResetPwd(scope.row)"
@@ -87,6 +91,7 @@
 
     <!-- ModifyUser -->
     <modify-user
+      v-if="checkPrivilege('edit') || checkPrivilege('add')"
       ref="ModifyUser"
       :instance="curUser"
       :roles="roles"

src/plugins/VueCharts.js

@@ -1,45 +0,0 @@
-import Vue from "vue";
-import ECharts from "vue-echarts";
-import { use } from "echarts/core";
-
-// import ECharts modules manually to reduce bundle size
-// 按需模块：https://github.com/apache/echarts/blob/master/src/echarts.all.ts
-// render type
-import { CanvasRenderer } from "echarts/renderers";
-
-// charts
-import {
-  BarChart,
-  LineChart,
-  PieChart,
-  ScatterChart,
-  RadarChart,
-  BoxplotChart
-} from "echarts/charts";
-
-// component
-import {
-  TitleComponent,
-  LegendComponent,
-  DataZoomComponent,
-  MarkLineComponent,
-  TooltipComponent
-} from "echarts/components";
-
-use([
-  CanvasRenderer,
-  BarChart,
-  LineChart,
-  PieChart,
-  ScatterChart,
-  RadarChart,
-  BoxplotChart,
-  TitleComponent,
-  LegendComponent,
-  DataZoomComponent,
-  MarkLineComponent,
-  TooltipComponent
-]);
-
-// register component to use
-Vue.component("v-chart", ECharts);

src/plugins/globalVuePlugins.js

@@ -1,5 +1,8 @@
 import { objAssign, randomCode, tableAction } from "@/plugins/utils";
-import globalMixins from "./mixins";
+// mixins
+import commonMixins from "../mixins/common";
+import privilegeMixins from "../mixins/privilege";
+// components
 import ViewFooter from "@/components/ViewFooter.vue";
 import AppSelect from "@/components/AppSelect.vue";
 import EnvSelect from "@/components/EnvSelect.vue";
@@ -27,6 +30,7 @@ export default {
     });
 
     //全局 mixins
-    Vue.mixin(globalMixins);
+    Vue.mixin(commonMixins);
+    Vue.mixin(privilegeMixins);
   }
 };

src/store.js

@@ -3,20 +3,19 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 
-// modules
-// import account from "./modules/account/store";
-
 export default new Vuex.Store({
   state: {
-    user: {}
+    user: {},
+    privilegeMap: {}
   },
   mutations: {
     setUser(state, user) {
       state.user = user;
+    },
+    setPrivilegeMap(state, privilegeMap) {
+      state.privilegeMap = privilegeMap;
     }
   },
   actions: {},
-  modules: {
-    // account
-  }
+  modules: {}
 });

src/views/Home.vue

@@ -135,10 +135,22 @@ export default {
     },
     getPrivileges(navList) {
       let privilegesUrls = [];
+      let privilegeMap = {};
       this.userRoles.forEach(role => {
-        const urls = ROLE_NAV[role] || [];
+        const navs = ROLE_NAV[role] || [];
+        const urls = navs.map(item => item.url);
+        navs.forEach(nav => {
+          if (!privilegeMap[nav.url]) {
+            privilegeMap[nav.url] = new Set();
+          }
+          if (nav.privilege)
+            nav.privilege.forEach(elem => privilegeMap[nav.url].add(elem));
+        });
+
         privilegesUrls.push(...urls);
       });
+      this.$store.commit("setPrivilegeMap", privilegeMap);
+
       return navList.filter(item => privilegesUrls.includes(item.url));
     },
     getMenuFirstRouter() {