From a6c7b2665db6ef17f5344e316b44343eb1ab8e6a Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Thu, 28 Dec 2023 17:25:43 +0800
Subject: [PATCH] frontend support permission check

---
 frontend/src/components/AuthButton.vue | 20 ++++++++++++-----
 frontend/src/module/permission.ts      | 31 ++++++++++++++++++++++++++
 frontend/src/request/user.ts           |  8 +++++++
 frontend/src/views/Batch/Batch.vue     |  4 ++--
 frontend/src/views/Home/Home.vue       |  4 +++-
 5 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/module/permission.ts

diff --git a/frontend/src/components/AuthButton.vue b/frontend/src/components/AuthButton.vue
index 26fe9cd..5eef014 100644
--- a/frontend/src/components/AuthButton.vue
+++ b/frontend/src/components/AuthButton.vue
@@ -5,11 +5,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { ref, computed, onMounted, watchEffect } from 'vue';
+import { hasPermisson } from '@/module/permission';
 
 const props = defineProps({
     auth: {
         type: String,
+        default: '',
     },
     // 是否在未授权情况下显示按钮
     show: {
@@ -18,14 +20,22 @@ const props = defineProps({
     }
 })
 
+const hasAuth = ref(false)
+onMounted(() => {
+    hasAuth.value = hasPermisson(props.auth)
+})
+
+watchEffect(() => {
+    hasAuth.value = hasPermisson(props.auth)
+})
+
+
 const showBtn = computed(() => {
-    // TODO: 
-    return true
+    return hasAuth.value || (!hasAuth.value && props.show)
 })
 // 控制是否使能按钮
 const disabled = computed(() => {
-    // TODO: 
-    return false
+    return !hasAuth.value
 })
 
 </script>
diff --git a/frontend/src/module/permission.ts b/frontend/src/module/permission.ts
new file mode 100644
index 0000000..0c86336
--- /dev/null
+++ b/frontend/src/module/permission.ts
@@ -0,0 +1,31 @@
+import { ref } from "vue";
+import { ElMessage } from 'element-plus';
+
+import { getPermission } from "@/request/user";
+import { RespCodeOK } from "@/request/request";
+
+const userPermissions = ref<any>({})
+
+export function hasPermisson(permission: string): boolean {
+    let words = permission.split("/")
+    let resource = words[0]
+    let operate = words[1]
+
+    if ((resource in userPermissions.value) && userPermissions.value[resource].includes(operate)) {
+        return true;
+    }
+    return false;
+}
+
+export function updatePermisson(): void {
+    getPermission().then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            userPermissions.value = resp.data
+        } else {
+            ElMessage.error("failed to get machines overview info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get machines overview info:" + err.msg)
+    })
+
+}
\ No newline at end of file
diff --git a/frontend/src/request/user.ts b/frontend/src/request/user.ts
index 8362fae..4790d3f 100644
--- a/frontend/src/request/user.ts
+++ b/frontend/src/request/user.ts
@@ -77,4 +77,12 @@ export function getCurrentUser() {
         url: '/user/info',
         method: 'get'
     })
+}
+
+// 获取用户权限
+export function getPermission() {
+    return request({
+        url: '/user/permission',
+        method: 'post',
+    })
 }
\ No newline at end of file
diff --git a/frontend/src/views/Batch/Batch.vue b/frontend/src/views/Batch/Batch.vue
index 6916cf3..6c8a26f 100644
--- a/frontend/src/views/Batch/Batch.vue
+++ b/frontend/src/views/Batch/Batch.vue
@@ -12,7 +12,7 @@
                     <template #dropdown>
                         <el-dropdown-menu>
                             <el-dropdown-item>
-                                <auth-button auth="batch_delete" @click="batchDelete">
+                                <auth-button auth="button/batch_delete" @click="batchDelete">
                                     删除
                                 </auth-button>
                             </el-dropdown-item>
@@ -38,7 +38,7 @@
                 </el-table-column>
                 <el-table-column prop="operation" label="操作">
                     <template #default="scope">
-                        <auth-button auth="batch_update" @click="onEditBatch(scope.row.ID)">
+                        <auth-button auth="button/batch_update" @click="onEditBatch(scope.row.ID)">
                             编辑
                         </auth-button>
                     </template>
diff --git a/frontend/src/views/Home/Home.vue b/frontend/src/views/Home/Home.vue
index e4975e3..4db7fd5 100644
--- a/frontend/src/views/Home/Home.vue
+++ b/frontend/src/views/Home/Home.vue
@@ -54,6 +54,7 @@ import TagView from "./components/TagView.vue";
 import Sidebar from "./components/Sidebar.vue";
 
 import { directTo, updateSidebarItems } from "@/router/index";
+import { updatePermisson } from "@/module/permission";
 import { platformVersion } from "@/request/basic"
 import { logout, getCurrentUser } from "@/request/user";
 import { RespCodeOK } from "@/request/request";
@@ -71,6 +72,7 @@ const version = ref<VersionInfo>({})
 onMounted(() => {
     updateSidebarItems();
     updateUserInfo();
+    updatePermisson();
 
     platformVersion().then((resp: any) => {
         if (resp.code == RespCodeOK) {
@@ -170,7 +172,7 @@ function doLogout() {
         align-items: center;
 
         .route {
-            flex:1;
+            flex: 1;
             display: flex;
             flex-direction: column;
             height: 100%;
-- 
Gitee