feat(system/client): 添加双token认证配置

Author: luoqiz

src/apis/system/type.ts

@@ -296,6 +296,8 @@ export interface ClientResp {
   timeout: string
   status: string
   isConcurrent: boolean
+  isEnableRefreshToken: boolean
+  refreshTokenTimeout: number
   replacedRange: string
   maxLoginCount: number
   overflowLogoutMode: string
@@ -316,6 +318,8 @@ export interface ClientDetailResp {
   timeout: string
   status: number
   isConcurrent: boolean
+  isEnableRefreshToken: boolean
+  refreshTokenTimeout: number
   maxLoginCount: number
   replacedRange: string
   overflowLogoutMode: string

src/views/system/config/client/AddModal.vue

@@ -39,6 +39,8 @@ const [form, resetForm] = useResetReactive({
   timeout: 86400,
   isConcurrent: true,
   maxLoginCount: -1,
+  isEnableRefreshToken: false,
+  refreshTokenTimeout: 2592000,
   status: 1,
 })
 
@@ -118,6 +120,39 @@ const columns: ColumnItem[] = reactive([
     },
     rules: [{ required: true, message: '请输入 Token 有效期' }],
   },
+  {
+    label: '是否启用Refresh Token',
+    field: 'isEnableRefreshToken',
+    type: 'switch',
+    span: 12,
+    props: {
+      type: 'round',
+      checkedValue: true,
+      uncheckedValue: false,
+      checkedText: '启用',
+      uncheckedText: '禁用',
+    },
+  },
+  {
+    label: () => (
+      <a-tooltip content="小于0,则和 Token 有效期相同">
+        Refresh Token 有效期
+        <icon-question-circle />
+      </a-tooltip>
+    ),
+    field: 'refreshTokenTimeout',
+    type: 'input-number',
+    span: 12,
+    slots: {
+      append: () => (
+        <span style={{ width: '30px', textAlign: 'center' }}>秒</span>
+      ),
+    },
+    props: {
+      placeholder: '请输入 Refresh Token 有效期',
+    },
+    rules: [{ required: true, message: '请输入 Refresh Token 有效期' }],
+  },
   {
     label: '是否允许同一账号多地同时登录',
     field: 'isConcurrent',

src/views/system/config/client/DetailDrawer.vue

@@ -13,6 +13,8 @@
       </a-descriptions-item>
       <a-descriptions-item label="Token最低活跃频率">{{ dataDetail?.activeTimeout }}</a-descriptions-item>
       <a-descriptions-item label="Token有效期">{{ dataDetail?.timeout }}</a-descriptions-item>
+      <a-descriptions-item label="启用Refresh Token">{{ dataDetail?.isEnableRefreshToken ? '是' : '否' }}</a-descriptions-item>
+      <a-descriptions-item label="Refresh Token 有效期">{{ dataDetail?.refreshTokenTimeout }}</a-descriptions-item>
       <a-descriptions-item label="状态" :span="2">
         <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
         <a-tag v-else color="red">禁用</a-tag>

src/views/system/config/client/index.vue

@@ -5,7 +5,7 @@
       :data="dataList"
       :columns="columns"
       :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1760 }"
       :pagination="pagination"
       :disabled-tools="['size']"
       :disabled-column-keys="['clientKey']"
@@ -149,6 +149,8 @@ const columns: TableInstance['columns'] = [
   },
   { title: 'Token 最低活跃频率', dataIndex: 'activeTimeout', slotName: 'activeTimeout', width: 180, align: 'center', render: ({ record }) => `${record.activeTimeout} 秒` },
   { title: 'Token 有效期', dataIndex: 'timeout', slotName: 'timeout', width: 180, align: 'center', render: ({ record }) => `${record.timeout} 秒` },
+  { title: '启用Refresh Token', dataIndex: 'isEnableRefreshToken', slotName: 'isEnableRefreshToken', width: 180, align: 'center', render: ({ record }) => `${record.isEnableRefreshToken ? '是' : '否'}` },
+  { title: 'Refresh Token 有效期', dataIndex: 'refreshTokenTimeout', slotName: 'refreshTokenTimeout', width: 180, align: 'center', render: ({ record }) => `${record.refreshTokenTimeout} 秒` },
   {
     title: '状态',
     dataIndex: 'status',