yx lin
1 year ago
committed by
GitHub
GitHub
2464 changed files with 144456 additions and 155369 deletions
@ -0,0 +1,27 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { |
|||
IdentitySessionDto, |
|||
GetUserSessionsInput |
|||
} from './model'; |
|||
|
|||
/** |
|||
* 查询会话列表 |
|||
* @param { GetUserSessionsInput } input 查询参数 |
|||
* @returns { Promise<PagedResultDto<IdentitySessionDto>> } |
|||
*/ |
|||
export const getSessions = (input?: GetUserSessionsInput): Promise<PagedResultDto<IdentitySessionDto>> => { |
|||
return defHttp.get<PagedResultDto<IdentitySessionDto>>({ |
|||
url: '/api/identity/sessions', |
|||
params: input, |
|||
}); |
|||
}; |
|||
/** |
|||
* 撤销会话 |
|||
* @param { string } sessionId 会话id |
|||
* @returns { Promise<void> } |
|||
*/ |
|||
export const revokeSession = (sessionId: string): Promise<void> => { |
|||
return defHttp.delete<void>({ |
|||
url: `/api/identity/sessions/${sessionId}/revoke`, |
|||
}); |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
export interface IdentitySessionDto extends EntityDto<string> { |
|||
sessionId: string; |
|||
device: string; |
|||
deviceInfo: string; |
|||
userId: string; |
|||
clientId?: string; |
|||
ipAddresses?: string; |
|||
signedIn: Date; |
|||
lastAccessed?: Date; |
|||
} |
|||
|
|||
export interface GetUserSessionsInput extends PagedAndSortedResultRequestDto { |
|||
userId?: string; |
|||
device?: string; |
|||
clientId?: string; |
|||
} |
|||
@ -0,0 +1,141 @@ |
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" |
|||
@register="registerModal" |
|||
:width="800" |
|||
:height="500" |
|||
:title="L('IdentitySessions')" |
|||
:mask-closable="false" |
|||
:can-fullscreen="false" |
|||
:show-ok-btn="false" |
|||
> |
|||
<div :style="getContentStyle" ref="contentWrapRef" class="session"> |
|||
<ScrollContainer ref="contentScrollRef"> |
|||
<template v-for="identitySession in identitySessions" :key="identitySession.id"> |
|||
<Card style="height: 100%"> |
|||
<template #title> |
|||
<div class="session__tile"> |
|||
<span>{{ identitySession.device }}</span> |
|||
<div style="padding-left: 5px;"> |
|||
<Tag |
|||
v-if="identitySession.sessionId === abpStore.getApplication.currentUser.sessionId" |
|||
color="#87d068" |
|||
>{{ L('CurrentSession') }}</Tag> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<Descriptions bordered size="small" :column="1"> |
|||
<DescriptionItem :label="L('DisplayName:SessionId')">{{ identitySession.sessionId }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:Device')">{{ identitySession.device }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:DeviceInfo')">{{ identitySession.deviceInfo }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:ClientId')">{{ identitySession.clientId }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:IpAddresses')">{{ identitySession.ipAddresses }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:SignedIn')">{{ formatToDateTime(identitySession.signedIn) }}</DescriptionItem> |
|||
<DescriptionItem v-if="identitySession.lastAccessed" :label="L('DisplayName:LastAccessed')">{{ formatToDateTime(identitySession.lastAccessed) }}</DescriptionItem> |
|||
</Descriptions> |
|||
<template #extra> |
|||
<Button |
|||
v-if="identitySession.sessionId !== abpStore.getApplication.currentUser.sessionId" |
|||
danger |
|||
@click="handleRevokeSession(identitySession)" |
|||
>{{ L('RevokeSession') }}</Button> |
|||
</template> |
|||
</Card> |
|||
</template> |
|||
</ScrollContainer> |
|||
</div> |
|||
<template #footer> |
|||
<APagination |
|||
ref="paginationRef" |
|||
:pageSizeOptions="['10', '25', '50', '100']" |
|||
:total="identitySessionTotal" |
|||
@change="fetchSessions" |
|||
@showSizeChange="fetchSessions" |
|||
/> |
|||
</template> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import type { CSSProperties } from 'vue'; |
|||
import { computed, ref } from 'vue'; |
|||
import { Button, Card, Descriptions, Pagination, Tag } from 'ant-design-vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { ScrollContainer } from '/@/components/Container'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { useLocalization } from '/@/hooks/abp/useLocalization'; |
|||
import { useContentHeight } from '/@/hooks/web/useContentHeight'; |
|||
import { useAbpStoreWithOut } from '/@/store/modules/abp'; |
|||
import { getSessions, revokeSession } from '/@/api/account/profiles'; |
|||
import { IdentitySessionDto } from '/@/api/identity/sessions/model'; |
|||
import { formatPagedRequest } from '/@/utils/http/abp/helper'; |
|||
import { formatToDateTime } from '/@/utils/dateUtil'; |
|||
|
|||
const DescriptionItem = Descriptions.Item; |
|||
const APagination = Pagination; |
|||
|
|||
const props = defineProps({ |
|||
autoContentHeight: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
}); |
|||
|
|||
const contentWrapRef = ref<any>(); |
|||
const contentScrollRef = ref<any>(); |
|||
const paginationRef = ref<any>(); |
|||
const getContentHeight = computed(() => props.autoContentHeight); |
|||
const { contentHeight } = useContentHeight(getContentHeight, contentWrapRef, [paginationRef], []); |
|||
const getContentStyle = computed((): CSSProperties => { |
|||
return { |
|||
width: '100%', |
|||
height: `${contentHeight.value}px`, |
|||
}; |
|||
}); |
|||
const identitySessions = ref<IdentitySessionDto[]>([]); |
|||
const identitySessionTotal = ref(0); |
|||
const abpStore = useAbpStoreWithOut(); |
|||
const { createConfirm, createMessage } = useMessage(); |
|||
const { L } = useLocalization(['AbpIdentity', 'AbpUi']); |
|||
const [registerModal] = useModalInner(() => { |
|||
fetchSessions(); |
|||
}); |
|||
|
|||
function fetchSessions(page: number = 1, pageSize: number = 10) { |
|||
const request = { |
|||
skipCount: page, |
|||
maxResultCount: pageSize, |
|||
}; |
|||
formatPagedRequest(request); |
|||
getSessions({ |
|||
skipCount: request.skipCount, |
|||
maxResultCount: request.maxResultCount, |
|||
}).then((res) => { |
|||
identitySessions.value = res.items; |
|||
identitySessionTotal.value = res.totalCount; |
|||
}); |
|||
} |
|||
|
|||
function handleRevokeSession(session: IdentitySessionDto) { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: L('AreYouSure'), |
|||
content: L('SessionWillBeRevokedMessage'), |
|||
onOk: async () => { |
|||
await revokeSession(session.sessionId); |
|||
createMessage.success(L('SuccessfullyRevoked')); |
|||
fetchSessions(); |
|||
}, |
|||
}); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.session { |
|||
.session__tile { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" |
|||
@register="registerModal" |
|||
:width="800" |
|||
:height="500" |
|||
:title="L('IdentitySessions')" |
|||
:mask-closable="false" |
|||
:can-fullscreen="false" |
|||
:show-ok-btn="false" |
|||
> |
|||
<div v-if="identitySessions.length <= 0"> |
|||
<Empty /> |
|||
</div> |
|||
<div v-else :style="getContentStyle" ref="contentWrapRef" class="session"> |
|||
<ScrollContainer ref="contentScrollRef"> |
|||
<template v-for="identitySession in identitySessions" :key="identitySession.id"> |
|||
<Card style="height: 100%"> |
|||
<template #title> |
|||
<div class="session__tile"> |
|||
<span>{{ identitySession.device }}</span> |
|||
<div style="padding-left: 5px;"> |
|||
<Tag |
|||
v-if="identitySession.sessionId === abpStore.getApplication.currentUser.sessionId" |
|||
color="#87d068" |
|||
>{{ L('CurrentSession') }}</Tag> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<Descriptions bordered size="small" :column="1"> |
|||
<DescriptionItem :label="L('DisplayName:SessionId')">{{ identitySession.sessionId }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:Device')">{{ identitySession.device }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:DeviceInfo')">{{ identitySession.deviceInfo }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:ClientId')">{{ identitySession.clientId }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:IpAddresses')">{{ identitySession.ipAddresses }}</DescriptionItem> |
|||
<DescriptionItem :label="L('DisplayName:SignedIn')">{{ formatToDateTime(identitySession.signedIn) }}</DescriptionItem> |
|||
<DescriptionItem v-if="identitySession.lastAccessed" :label="L('DisplayName:LastAccessed')">{{ formatToDateTime(identitySession.lastAccessed) }}</DescriptionItem> |
|||
</Descriptions> |
|||
<template #extra> |
|||
<Button |
|||
v-auth="['AbpIdentity.IdentitySessions.Revoke']" |
|||
v-if="identitySession.sessionId !== abpStore.getApplication.currentUser.sessionId" |
|||
danger |
|||
@click="handleRevokeSession(identitySession)" |
|||
>{{ L('RevokeSession') }}</Button> |
|||
</template> |
|||
</Card> |
|||
</template> |
|||
</ScrollContainer> |
|||
</div> |
|||
<template #footer> |
|||
<APagination |
|||
v-if="identitySessions.length > 0" |
|||
ref="paginationRef" |
|||
:pageSizeOptions="['10', '25', '50', '100']" |
|||
:total="identitySessionTotal" |
|||
@change="fetchSessions" |
|||
@showSizeChange="fetchSessions" |
|||
/> |
|||
</template> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import type { CSSProperties } from 'vue'; |
|||
import { computed, ref } from 'vue'; |
|||
import { Button, Card, Descriptions, Empty, Pagination, Tag } from 'ant-design-vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { ScrollContainer } from '/@/components/Container'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { useLocalization } from '/@/hooks/abp/useLocalization'; |
|||
import { useContentHeight } from '/@/hooks/web/useContentHeight'; |
|||
import { useAbpStoreWithOut } from '/@/store/modules/abp'; |
|||
import { getSessions, revokeSession } from '/@/api/identity/sessions'; |
|||
import { IdentitySessionDto } from '/@/api/identity/sessions/model'; |
|||
import { formatPagedRequest } from '/@/utils/http/abp/helper'; |
|||
import { formatToDateTime } from '/@/utils/dateUtil'; |
|||
|
|||
const DescriptionItem = Descriptions.Item; |
|||
const APagination = Pagination; |
|||
|
|||
const props = defineProps({ |
|||
autoContentHeight: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
}); |
|||
|
|||
const userId = ref(''); |
|||
const contentWrapRef = ref<any>(); |
|||
const contentScrollRef = ref<any>(); |
|||
const paginationRef = ref<any>(); |
|||
const getContentHeight = computed(() => props.autoContentHeight); |
|||
const { contentHeight } = useContentHeight(getContentHeight, contentWrapRef, [paginationRef], []); |
|||
const getContentStyle = computed((): CSSProperties => { |
|||
return { |
|||
width: '100%', |
|||
height: `${contentHeight.value}px`, |
|||
}; |
|||
}); |
|||
const identitySessions = ref<IdentitySessionDto[]>([]); |
|||
const identitySessionTotal = ref(0); |
|||
const abpStore = useAbpStoreWithOut(); |
|||
const { createConfirm, createMessage } = useMessage(); |
|||
const { L } = useLocalization(['AbpIdentity', 'AbpUi']); |
|||
const [registerModal] = useModalInner((data: { userId: string }) => { |
|||
userId.value = data.userId; |
|||
identitySessions.value = []; |
|||
fetchSessions(); |
|||
}); |
|||
|
|||
function fetchSessions(page: number = 1, pageSize: number = 10) { |
|||
const request = { |
|||
skipCount: page, |
|||
maxResultCount: pageSize, |
|||
}; |
|||
formatPagedRequest(request); |
|||
getSessions({ |
|||
userId: userId.value, |
|||
skipCount: request.skipCount, |
|||
maxResultCount: request.maxResultCount, |
|||
}).then((res) => { |
|||
identitySessions.value = res.items; |
|||
identitySessionTotal.value = res.totalCount; |
|||
}); |
|||
} |
|||
|
|||
function handleRevokeSession(session: IdentitySessionDto) { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: L('AreYouSure'), |
|||
content: L('SessionWillBeRevokedMessage'), |
|||
onOk: async () => { |
|||
await revokeSession(session.sessionId); |
|||
createMessage.success(L('SuccessfullyRevoked')); |
|||
fetchSessions(); |
|||
}, |
|||
}); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.session { |
|||
.session__tile { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue