Vue3 重构:令牌管理

This commit is contained in:
YunaiV 2023-03-19 20:56:11 +08:00
parent 2cf384d7ab
commit 1883293553
3 changed files with 137 additions and 109 deletions

View File

@ -11,18 +11,12 @@ export interface OAuth2TokenVO {
expiresTime: Date expiresTime: Date
} }
export interface OAuth2TokenPageReqVO extends PageParam {
userId?: number
userType?: number
clientId?: string
}
// 查询 token列表 // 查询 token列表
export const getAccessTokenPageApi = (params: OAuth2TokenPageReqVO) => { export const getAccessTokenPage = (params: PageParam) => {
return request.get({ url: '/system/oauth2-token/page', params }) return request.get({ url: '/system/oauth2-token/page', params })
} }
// 删除 token // 删除 token
export const deleteAccessTokenApi = (accessToken: number) => { export const deleteAccessToken = (accessToken: number) => {
return request.delete({ url: '/system/oauth2-token/delete?accessToken=' + accessToken }) return request.delete({ url: '/system/oauth2-token/delete?accessToken=' + accessToken })
} }

View File

@ -1,64 +1,146 @@
<template> <template>
<ContentWrap> <content-wrap>
<!-- 列表 --> <!-- 搜索工作栏 -->
<XTable @register="registerTable"> <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<template #actionbtns_default="{ row }"> <el-form-item label="用户编号" prop="userId">
<!-- 操作详情 --> <el-input
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> v-model="queryParams.userId"
<!-- 操作登出 --> placeholder="请输入用户编号"
<XTextButton clearable
preIcon="ep:delete" @keyup.enter="handleQuery"
:title="t('action.logout')"
v-hasPermi="['system:oauth2-token:delete']"
@click="handleForceLogout(row.id)"
/> />
</el-form-item>
<el-form-item label="用户类型" prop="userType">
<el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="客户端编号" prop="clientId">
<el-input
v-model="queryParams.clientId"
placeholder="请输入客户端编号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="访问令牌" align="center" prop="accessToken" width="300" />
<el-table-column label="刷新令牌" align="center" prop="refreshToken" width="300" />
<el-table-column label="用户编号" align="center" prop="userId" />
<el-table-column label="用户类型" align="center" prop="userType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
</template> </template>
</XTable> </el-table-column>
</ContentWrap> <el-table-column
<XModal v-model="dialogVisible" :title="dialogTitle"> label="过期时间"
<!-- 对话框(详情) --> align="center"
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" /> prop="expiresTime"
<!-- 操作按钮 --> :formatter="dateFormatter"
<template #footer> width="180"
<XButton :title="t('dialog.close')" @click="dialogVisible = false" /> />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="danger"
@click="handleForceLogout(scope.row.id)"
v-hasPermi="['system:oauth2-token:delete']"
>
强退
</el-button>
</template> </template>
</XModal> </el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
</template> </template>
<script setup lang="ts" name="Token">
import { allSchemas } from './token.data'
import * as TokenApi from '@/api/system/oauth2/token'
const { t } = useI18n() // <script setup lang="ts" name="Oauth2AccessToken">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as OAuth2AccessTokenApi from '@/api/system/oauth2/token'
const message = useMessage() // const message = useMessage() //
// const { t } = useI18n() //
const [registerTable, { reload }] = useXTable({
allSchemas: allSchemas, const loading = ref(true) //
topActionSlots: false, const total = ref(0) //
getListApi: TokenApi.getAccessTokenPageApi const list = ref([]) //
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: null,
userType: null,
clientId: null
}) })
const queryFormRef = ref() //
// ========== ========== /** 查询参数列表 */
const detailData = ref() // Ref const getList = async () => {
const dialogVisible = ref(false) // loading.value = true
const dialogTitle = ref(t('action.detail')) // try {
// const data = await OAuth2AccessTokenApi.getAccessTokenPage(queryParams)
const handleDetail = async (row: TokenApi.OAuth2TokenVO) => { list.value = data.list
// total.value = data.total
detailData.value = row } finally {
dialogVisible.value = true loading.value = false
}
} }
// 退 /** 搜索按钮操作 */
const handleForceLogout = (rowId: number) => { const handleQuery = () => {
message queryParams.pageNo = 1
.confirm('是否要强制退出用户') getList()
.then(async () => { }
await TokenApi.deleteAccessTokenApi(rowId)
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 强制退出操作 */
const handleForceLogout = async (id: number) => {
try {
//
await message.confirm('是否要强制退出用户')
//
await OAuth2AccessTokenApi.deleteAccessToken(id)
message.success(t('common.success')) message.success(t('common.success'))
})
.finally(async () => {
// //
await reload() await getList()
}) } catch {}
} }
/** 初始化 **/
onMounted(() => {
getList()
})
</script> </script>

View File

@ -1,48 +0,0 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '用户编号',
field: 'userId',
isSearch: true
},
{
title: '访问令牌',
field: 'accessToken'
},
{
title: '刷新令牌',
field: 'refreshToken'
},
{
title: '客户端编号',
field: 'clientId',
isSearch: true
},
{
title: '用户类型',
field: 'userType',
dictType: DICT_TYPE.USER_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false
},
{
title: '过期时间',
field: 'expiresTime',
formatter: 'formatDate',
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)