From d21590509b22c7ec7f20b8def6931fc46b35166b Mon Sep 17 00:00:00 2001
From: JaydenZhou <380774082@qq.com>
Date: Thu, 5 Dec 2024 23:01:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EapiKey=E7=9A=84=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=92=8C=E8=8E=B7=E5=8F=96=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/oauth2/oauth2Token.js     |  17 ++++
 src/views/system/oauth2/apikey/index.vue | 109 +++++++++++++++++++++++
 2 files changed, 126 insertions(+)
 create mode 100644 src/views/system/oauth2/apikey/index.vue

diff --git a/src/api/system/oauth2/oauth2Token.js b/src/api/system/oauth2/oauth2Token.js
index 37402e8f..d29eafb9 100644
--- a/src/api/system/oauth2/oauth2Token.js
+++ b/src/api/system/oauth2/oauth2Token.js
@@ -16,3 +16,20 @@ export function deleteAccessToken(accessToken) {
     method: 'delete'
   })
 }
+
+// 创建apiKey令牌
+export function createApiKeyToken() {
+  return request({
+    url: '/system/oauth2-token/create-api-key',
+    method: 'post'
+  })
+}
+
+// 获取apiKey令牌分页
+export function getApiKeyTokenPage(query) {
+  return request({
+    url: '/system/oauth2-token/api-key/page',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/views/system/oauth2/apikey/index.vue b/src/views/system/oauth2/apikey/index.vue
new file mode 100644
index 00000000..278e8301
--- /dev/null
+++ b/src/views/system/oauth2/apikey/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="OAuth 2.0（SSO 单点登录)" url="https://doc.iocoder.cn/oauth2/" />
+    <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:oauth2-client:create']">生成apiKey</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="list" style="width: 100%;">
+      <el-table-column label="apiKey令牌" align="center" prop="accessToken" width="300" />
+      <el-table-column label="用户编号" align="center" prop="userId" />
+      <el-table-column label="用户类型" align="center" prop="userType" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="客户端类型" align="center" prop="clientId" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="过期时间" align="center" prop="expiresTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.expiresTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)"
+            v-hasPermi="['system:oauth2-token:delete']">强退</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import { createApiKeyToken, getApiKeyTokenPage, deleteAccessToken } from "@/api/system/oauth2/oauth2Token";
+
+export default {
+  name: "SystemApiKeyClient",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        userId: undefined,
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList() {
+      this.loading = true;
+      getApiKeyTokenPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 强退按钮操作 */
+    handleForceLogout(row) {
+      this.$modal.confirm('是否确认强退令牌为"' + row.accessToken + '"的数据项?').then(function() {
+          return deleteAccessToken(row.accessToken);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("强退成功");
+      }).catch(() => {});
+    },
+    /** 新增apiKey操作 */
+    handleAdd() {
+      createApiKeyToken().then(() => {
+        this.getList();
+        this.$modal.msgSuccess("新增成功");
+      });
+    }
+  }
+};
+</script>
+