This commit is contained in:
ailanyin
2023-05-29 10:05:24 +08:00
parent 45af378c51
commit e0550f9e91
5 changed files with 148 additions and 78 deletions

View File

@ -1,18 +1,18 @@
import request from '@/utils/request' import request from "@/utils/request";
// 查询在线用户列表 // 查询在线用户列表
export function list(query) { export function list(query) {
return request({ return request({
url: '/monitor/online/list', url: "/monitor/online/list",
method: 'get', method: "get",
params: query params: query,
}) });
} }
// 强退用户 // 强退用户
export function forceLogout(username, deviceSn) { export function forceLogout(username, deviceSn) {
return request({ return request({
url: '/monitor/online/' + username + '/' + deviceSn, url: "/monitor/online/" + username + "/" + deviceSn,
method: 'delete' method: "delete",
}) });
} }

View File

@ -42,12 +42,21 @@ router.beforeEach((to, from, next) => {
}); });
}) })
.catch((err) => { .catch((err) => {
useUserStore() if (err === "您已被挤下线") {
.logOut() useUserStore()
.then(() => { .abnormalLogOut()
ElMessage.error(err); .then(() => {
next({ path: "/" }); ElMessage.error(err);
}); next({ path: "/" });
});
} else {
useUserStore()
.logOut()
.then(() => {
ElMessage.error(err);
next({ path: "/" });
});
}
}); });
} else { } else {
next(); next();

View File

@ -132,15 +132,11 @@ service.interceptors.response.use(
} else if (code === 4012) { } else if (code === 4012) {
if (!isRelogin.show) { if (!isRelogin.show) {
isRelogin.show = true; isRelogin.show = true;
ElMessageBox.confirm( ElMessageBox.confirm("您已被挤下线", "系统提示", {
"您以被挤下线", confirmButtonText: "重新登录",
"系统提示", cancelButtonText: "取消",
{ type: "warning",
confirmButtonText: "重新登录", })
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => { .then(() => {
isRelogin.show = false; isRelogin.show = false;
useUserStore() useUserStore()
@ -153,7 +149,7 @@ service.interceptors.response.use(
isRelogin.show = false; isRelogin.show = false;
}); });
} }
return Promise.reject("无效的会话,或者会话已过期,请重新登录。"); return Promise.reject("您已被挤下线");
} else if (code === 500) { } else if (code === 500) {
ElMessage({ message: msg, type: "error" }); ElMessage({ message: msg, type: "error" });
return Promise.reject(new Error(msg)); return Promise.reject(new Error(msg));

View File

@ -169,7 +169,8 @@ function handleLogin() {
function getCode() { function getCode() {
getCodeImg().then((res) => { getCodeImg().then((res) => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; captchaEnabled.value =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
register.value = res.register === undefined ? true : res.register; register.value = res.register === undefined ? true : res.register;
if (captchaEnabled.value) { if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img; codeUrl.value = "data:image/gif;base64," + res.img;

View File

@ -1,43 +1,103 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true"> <el-form :model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="用户名称" prop="username"> <el-form-item label="用户名称" prop="username">
<el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 200px" <el-input
@keyup.enter="handleQuery" /> v-model="queryParams.username"
</el-form-item> placeholder="请输入用户名称"
<el-form-item> clearable
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> style="width: 200px"
<el-button icon="Refresh" @click="resetQuery">重置</el-button> @keyup.enter="handleQuery"
</el-form-item> />
</el-form> </el-form-item>
<el-table v-loading="loading" :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)" <el-form-item>
style="width: 100%;"> <el-button type="primary" icon="Search" @click="handleQuery"
<el-table-column label="序号" width="50" type="index" align="center"> >搜索</el-button
<template #default="scope"> >
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</template> </el-form-item>
</el-table-column> </el-form>
<el-table-column label="会话编号" align="center" prop="deviceSn" :show-overflow-tooltip="true" /> <el-table
<el-table-column label="登录名称" align="center" prop="username" :show-overflow-tooltip="true" /> v-loading="loading"
<el-table-column label="主机" align="center" prop="ip" :show-overflow-tooltip="true" /> :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
<el-table-column label="登录地点" align="center" prop="address" :show-overflow-tooltip="true" /> style="width: 100%"
<el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" /> >
<el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" /> <el-table-column label="序号" width="50" type="index" align="center">
<el-table-column label="登录时间" align="center" prop="loginTime" width="180"> <template #default="scope">
<template #default="scope"> <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
<span>{{ parseTime(scope.row.loginTime) }}</span> </template>
</template> </el-table-column>
</el-table-column> <el-table-column
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> label="会话编号"
<template #default="scope"> align="center"
<el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" prop="deviceSn"
v-hasPermi="['monitor:online:forceLogout']">强退</el-button> :show-overflow-tooltip="true"
</template> />
</el-table-column> <el-table-column
</el-table> label="登录名称"
align="center"
prop="username"
:show-overflow-tooltip="true"
/>
<el-table-column
label="主机"
align="center"
prop="ip"
:show-overflow-tooltip="true"
/>
<el-table-column
label="登录地点"
align="center"
prop="address"
:show-overflow-tooltip="true"
/>
<el-table-column
label="操作系统"
align="center"
prop="os"
:show-overflow-tooltip="true"
/>
<el-table-column
label="浏览器"
align="center"
prop="browser"
:show-overflow-tooltip="true"
/>
<el-table-column
label="登录时间"
align="center"
prop="loginTime"
width="180"
>
<template #default="scope">
<span>{{ parseTime(scope.row.loginTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
link
type="primary"
icon="Delete"
@click="handleForceLogout(scope.row)"
v-hasPermi="['monitor:online:forceLogout']"
>强退</el-button
>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" /> <pagination
</div> v-show="total > 0"
:total="total"
v-model:page="pageNum"
v-model:limit="pageSize"
/>
</div>
</template> </template>
<script setup name="Online"> <script setup name="Online">
@ -52,37 +112,41 @@ const pageNum = ref(1);
const pageSize = ref(10); const pageSize = ref(10);
const queryParams = ref({ const queryParams = ref({
ip: undefined, ip: undefined,
username: undefined username: undefined,
}); });
/** 查询登录日志列表 */ /** 查询登录日志列表 */
function getList() { function getList() {
loading.value = true; loading.value = true;
initData(queryParams.value).then(response => { initData(queryParams.value).then((response) => {
onlineList.value = response.rows; onlineList.value = response.rows;
total.value = response.total; total.value = response.total;
loading.value = false; loading.value = false;
}); });
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
function handleQuery() { function handleQuery() {
pageNum.value = 1; pageNum.value = 1;
getList(); getList();
} }
/** 重置按钮操作 */ /** 重置按钮操作 */
function resetQuery() { function resetQuery() {
proxy.resetForm("queryRef"); proxy.resetForm("queryRef");
handleQuery(); handleQuery();
} }
/** 强退按钮操作 */ /** 强退按钮操作 */
function handleForceLogout(row) { function handleForceLogout(row) {
proxy.$modal.confirm('是否确认强退名称为"' + row.username + '"的用户?').then(function () { proxy.$modal
.confirm('是否确认强退名称为"' + row.username + '"的用户?')
.then(function () {
return forceLogout(row.username, row.deviceSn); return forceLogout(row.username, row.deviceSn);
}).then(() => { })
.then(() => {
getList(); getList();
proxy.$modal.msgSuccess("删除成功"); proxy.$modal.msgSuccess("删除成功");
}).catch(() => { }); })
.catch(() => {});
} }
getList(); getList();