From 07f2785b7a38e3dca81ef0a1a6b5070574f55aaa Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Mon, 1 Apr 2024 09:40:47 +0800
Subject: [PATCH] add permission for project menu

---
 frontend/src/components/PGTree.vue            | 22 +++++++++-------
 frontend/src/module/permission.ts             |  4 ++-
 frontend/src/router/index.ts                  |  6 +++++
 frontend/src/stores/router.ts                 |  7 ++++++
 frontend/src/views/Cluster/CreateBatch.vue    |  3 ++-
 frontend/src/views/Home/Home.vue              |  5 ++--
 .../src/views/Home/components/Sidebar.vue     | 25 +++++++++----------
 .../src/views/Role/components/authData.ts     | 14 ++++++++---
 8 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/PGTree.vue b/frontend/src/components/PGTree.vue
index 89ee6a12..00d2b1da 100644
--- a/frontend/src/components/PGTree.vue
+++ b/frontend/src/components/PGTree.vue
@@ -9,15 +9,12 @@
         <span class="custom-tree-node">
           <span>{{ node.label }}</span>
           <span v-if="editable">
-            <el-icon @click.stop="addNode(node, data)">
-              <Plus />
-            </el-icon>
-            <el-icon v-if="data.id !== 1" @click.stop="deleteNode(node, data)">
-              <Delete />
-            </el-icon>
-            <el-icon @click.stop="renameNode(node, data)">
-              <EditPen />
-            </el-icon>
+            <auth-button link auth="button/dept_add" title="添加" :icon="Plus"
+              @click.stop="addNode(node, data)"></auth-button>
+            <auth-button link auth="button/dept_delete" title="删除" :icon="Delete"
+              @click.stop="deleteNode(node, data)"></auth-button>
+            <AuthButton link auth="button/dept_update" title="编辑" :icon="Edit" @click.stop="renameNode(node, data)">
+            </AuthButton>
           </span>
         </span>
       </template>
@@ -28,9 +25,11 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 import { ElMessage, ElMessageBox } from 'element-plus';
+import { Delete, Edit, Plus, Share, Upload } from '@element-plus/icons-vue'
 
 import { getSubDepartment, updateDepartment, deleteDepartment, addDepartment } from "@/request/cluster";
 import { RespCodeOK } from "@/request/request";
+import AuthButton from "./AuthButton.vue";
 
 import type { DeptTree } from "@/types/cluster";
 const emits = defineEmits(["onNodeClicked"])
@@ -177,5 +176,10 @@ function addNode(node: any, data: any) {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  .el-button+.el-button {
+    margin-left: 0 !important;
+  }
+
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/module/permission.ts b/frontend/src/module/permission.ts
index 0c86336f..8ab4866a 100644
--- a/frontend/src/module/permission.ts
+++ b/frontend/src/module/permission.ts
@@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus';
 
 import { getPermission } from "@/request/user";
 import { RespCodeOK } from "@/request/request";
+import { updateSidebarItems } from "@/router";
 
 const userPermissions = ref<any>({})
 
@@ -20,7 +21,8 @@ export function hasPermisson(permission: string): boolean {
 export function updatePermisson(): void {
     getPermission().then((resp: any) => {
         if (resp.code === RespCodeOK) {
-            userPermissions.value = resp.data
+          userPermissions.value = resp.data;
+            updateSidebarItems();
         } else {
             ElMessage.error("failed to get machines overview info: " + resp.msg)
         }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 60ad7e99..67ddbece 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -211,6 +211,7 @@ import PluginFrame from "@/views/Plugin/PluginFrame.vue";
 
 import { app } from "@/main";
 import { useRouter } from "vue-router";
+import { hasPermisson } from '@/module/permission';
 
 export function updateSidebarItems() {
   let menus = generateLocalMenus();
@@ -220,6 +221,7 @@ export function updateSidebarItems() {
     addPluginRoute(item);
     // 更新侧边菜单
     let obj: Menu = {
+      type:'plugin',
       path: item.path,
       title: item.name,
       hidden: false,
@@ -245,6 +247,10 @@ export function updateSidebarItems() {
     // app.component(item.name, PluginFrame);
 
   }
+  menus.map((menu: any) => {
+    if (menu.type === 'plugin') return; // 插件权限先不做限制
+    menu.hidden = !hasPermisson('menu/' + menu.panel);
+  })
   routerStore().menus = menus;
 }
 
diff --git a/frontend/src/stores/router.ts b/frontend/src/stores/router.ts
index ef939001..b40c6426 100644
--- a/frontend/src/stores/router.ts
+++ b/frontend/src/stores/router.ts
@@ -8,6 +8,7 @@ export interface Menu {
   panel: string
   icon: string
   subMenus: Menu[] | null
+  type?:string // 标识插件，权限到位后可删除
 }
 
 // 存储的router信息用于sidebar和router动态生成
@@ -18,6 +19,12 @@ export const routerStore = defineStore('router', {
       routers: [] as any
     }
   },
+  actions:  {
+    reset(){
+      this.menus = [];
+      this.routers = [];
+    }
+  },
   persist: true
 })
 
diff --git a/frontend/src/views/Cluster/CreateBatch.vue b/frontend/src/views/Cluster/CreateBatch.vue
index 1c591a47..758f367e 100644
--- a/frontend/src/views/Cluster/CreateBatch.vue
+++ b/frontend/src/views/Cluster/CreateBatch.vue
@@ -20,7 +20,7 @@
       <el-transfer class="transfer" filterable filter-placeholder="请输入IP" :filter-method="filterMethod"
         :titles="['备选项', '已选项']" :data="nodeMachines" v-model="selectedMachines">
         <template #right-footer>
-          <el-button type="primary" @click="onCreateBatch">创建</el-button>
+          <auth-button auth="button/batch_create" type="primary" @click="onCreateBatch">创建</auth-button>
         </template>
       </el-transfer>
     </div>
@@ -32,6 +32,7 @@ import { ref, toRaw } from "vue";
 import { ElMessage } from 'element-plus';
 
 import PGTree from "@/components/PGTree.vue";
+import AuthButton from "@/components/AuthButton.vue";
 
 import type { DeptTree } from "@/types/cluster";
 
diff --git a/frontend/src/views/Home/Home.vue b/frontend/src/views/Home/Home.vue
index 10a2bd21..51769d25 100644
--- a/frontend/src/views/Home/Home.vue
+++ b/frontend/src/views/Home/Home.vue
@@ -99,9 +99,8 @@ const version = ref<VersionInfo>({})
 
 onMounted(() => {
   updatePlugins();
-  updateSidebarItems();
-  updateUserInfo();
   updatePermisson();
+  updateUserInfo();
 
   platformVersion().then((resp: any) => {
     if (resp.code == RespCodeOK) {
@@ -167,9 +166,11 @@ function handleLogout() {
 }
 
 import { removeToken } from "@/module/cookie";
+import { routerStore } from "@/stores/router";
 
 function doLogout() {
   userStore().$reset()
+  routerStore().reset();
   removeToken()
   directTo('/login')
 }
diff --git a/frontend/src/views/Home/components/Sidebar.vue b/frontend/src/views/Home/components/Sidebar.vue
index 7756b997..b4326b4c 100644
--- a/frontend/src/views/Home/components/Sidebar.vue
+++ b/frontend/src/views/Home/components/Sidebar.vue
@@ -3,7 +3,7 @@
     <el-menu :collapse="props.isCollapse" :router="true">
       <template v-for="(menu, index) in routes" :key="index">
         <!-- 带子菜单的项 -->
-        <el-sub-menu v-if="menu.subMenus" :index="menu.path">
+        <el-sub-menu v-if="menu.subMenus && !menu.hidden" :index="menu.path">
           <template #title>
             <el-icon>
               <component class="sidebar_icon" :is="menu.icon"></component>
@@ -16,7 +16,8 @@
           </el-menu-item>
         </el-sub-menu>
         <!-- 不带子菜单的项 -->
-        <el-menu-item v-if="!menu.subMenus" :index="menu.path" :class="menu.title === activeTitle ? 'active' : 'inactive'">
+        <el-menu-item v-if="!menu.subMenus && !menu.hidden" :index="menu.path"
+          :class="menu.title === activeTitle ? 'active' : 'inactive'">
           <component class="sidebar_icon" :is="menu.icon"></component>
           <template #title>{{ menu.title }}</template>
         </el-menu-item>
@@ -26,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect, onMounted } from "vue";
+import { ref, watchEffect, onMounted, watch } from "vue";
 import { routerStore, type Menu } from "@/stores/router";
 import { useRoute } from "vue-router";
 let routes: any = ref<Menu[]>([]);
@@ -40,18 +41,15 @@ let props = defineProps({
   }
 })
 onMounted(() => {
-  routes.value = routerStore().menus
+  setTimeout(() => {
+    routes.value = routerStore().menus
+  }, 100)
 });
-const handleOpen = (_key: string, _keyPath: string[]) => {
-  // console.log(key, keyPath)
-}
-const handleClose = (_key: string, _keyPath: string[]) => {
-  // console.log(key, keyPath)
-}
 watchEffect(() => {
-  routes.value = routerStore().menus;
+  routes.value = routerStore().menus
   activeTitle.value = route.meta.title as string;
 })
+
 </script>
 
 <style lang="scss" scoped>
@@ -70,11 +68,12 @@ watchEffect(() => {
   border-right: 2px solid var(--active-color);
   color: var(--active-color);
 }
+
 .inactive {
-  color:var(--el-menu-text-color) !important;
+  color: var(--el-menu-text-color) !important;
 }
+
 .el-menu-item.is-active {
   color: var(--active-color)
 }
-
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/Role/components/authData.ts b/frontend/src/views/Role/components/authData.ts
index 532f933d..45e6f41e 100644
--- a/frontend/src/views/Role/components/authData.ts
+++ b/frontend/src/views/Role/components/authData.ts
@@ -1,4 +1,7 @@
-// 整个系统需要控制权限的按钮配置项
+// 整个系统需要控制权限的按钮配置项 当前27
+
+// 需要做动态添加插件权限逻辑
+
 export let authData = [{
     id: '1',
     label: '概览',
@@ -30,6 +33,11 @@ export let authData = [{
         btnId: '16',
         label: '机器删除',
         menuName: 'machine_delete',
+    },{
+        id: '24',
+        btnId: '17',
+        label: '创建批次',
+        menuName: 'batch_create',
     }]
 }, {
     id: '3',
@@ -106,7 +114,7 @@ export let authData = [{
             menuName: 'role_modify',
         }]
 },
-{
+/* {
     id: '6',
     label: '配置管理',
     isMenu: true,
@@ -117,7 +125,7 @@ export let authData = [{
         label: '配置下发',
         menuName: 'config_install',
     }]
-},
+}, */
 {
     id: '7',
     label: '日志管理',
-- 
Gitee