支持PC端支持使用IP+端口的方式登录

This commit is contained in:
fangxiang 2022-07-21 11:19:12 +08:00
parent 51b8f27717
commit cea6a98a4a
6 changed files with 78 additions and 15 deletions

View File

@ -11,6 +11,7 @@ import { defineComponent } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus"; import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useStore } from "src/store"; import { useStore } from "src/store";
import GlobalData from "./common/GlobalData";
export default defineComponent({ export default defineComponent({
name: "App", name: "App",
@ -101,6 +102,8 @@ export default defineComponent({
(window as any).controlLogout = () => { (window as any).controlLogout = () => {
Cookies.remove("auto_login"); Cookies.remove("auto_login");
GlobalData.getInstance().getCurrentClient()?.destory();
GlobalData.getInstance().clearClients();
SessionStorage.clear(); SessionStorage.clear();
try { try {
$q.fullscreen.exit(); $q.fullscreen.exit();

View File

@ -1105,13 +1105,13 @@ export default class ClientConnection {
} }
public destory() { public destory() {
this.ws?.close();
if (this.ws) { if (this.ws) {
this.ws.onclose = null; this.ws.onclose = null;
this.ws.onerror = null; this.ws.onerror = null;
this.ws.onopen = null; this.ws.onopen = null;
this.ws.onmessage = null; this.ws.onmessage = null;
} }
this.ws?.close();
this.ws = null; this.ws = null;
} }
} }

View File

@ -198,6 +198,17 @@ export default class GlobalData {
return this.getClient(this._current_client_name); return this.getClient(this._current_client_name);
} }
public clearClients() {
for (const item of this.clients) {
if (item && item[1]) {
item[1]?.destory();
(<any>item[1]) = null;
}
}
this.clients.clear();
this.clients = new Map<string, ClientConnection>();
}
public createCurrentRequestUrl() { public createCurrentRequestUrl() {
let client = this.getCurrentClient(); let client = this.getCurrentClient();
if (client) { if (client) {

View File

@ -240,7 +240,7 @@
> >
{{ $t("rename") }} {{ $t("rename") }}
<q-tooltip> <q-tooltip>
{{ $t("click") }}{{ $t("rename") }} {{ $t("click") }}{{ $t(" ") }}{{ $t("rename") }}
</q-tooltip> </q-tooltip>
</a> </a>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
@ -250,7 +250,7 @@
> >
{{ $t("_copy2") }} {{ $t("_copy2") }}
<q-tooltip> <q-tooltip>
{{ $t("click") }}{{ $t("_copy2") }} {{ $t("click") }}{{ $t(" ") }}{{ $t("_copy2") }}
</q-tooltip> </q-tooltip>
</a> </a>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
@ -260,7 +260,7 @@
> >
{{ $t("_cut2") }} {{ $t("_cut2") }}
<q-tooltip> <q-tooltip>
{{ $t("click") }}{{ $t("_cut2") }} {{ $t("click") }}{{ $t(" ") }}{{ $t("_cut2") }}
</q-tooltip> </q-tooltip>
</a> </a>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
@ -270,7 +270,7 @@
> >
{{ $t("delete") }} {{ $t("delete") }}
<q-tooltip> <q-tooltip>
{{ $t("click") }}{{ $t("delete") }} {{ $t("click") }}{{ $t(" ") }}{{ $t("delete") }}
</q-tooltip> </q-tooltip>
</a> </a>
</div> </div>
@ -282,7 +282,7 @@
> >
{{ $t("select file") }} {{ $t("select file") }}
<q-tooltip> <q-tooltip>
{{ $t("click") }}{{ $t("select file") }} {{ $t("click") }}{{ $t(" ") }}{{ $t("select file") }}
</q-tooltip> </q-tooltip>
</a> </a>
</div> </div>

View File

@ -304,4 +304,6 @@ export default {
"cancel upload file": "Cancel Upload File", "cancel upload file": "Cancel Upload File",
"are you sure power off device": "Are You Sure Power Off Device", "are you sure power off device": "Are You Sure Power Off Device",
"input folder name": "Input Folder Name", "input folder name": "Input Folder Name",
example: "Example",
"example:": "Example:",
}; };

View File

@ -30,18 +30,19 @@
:disable="data.loading" :disable="data.loading"
v-model="data.ip_address" v-model="data.ip_address"
:label="$t('server ip address')" :label="$t('server ip address')"
:hint="$t('please input server ip address')" :hint="
$t('please input server ip address') +
', ' +
$t('example') +
':' +
'192.168.1.1:1234'
"
lazy-rules lazy-rules
:rules="[ :rules="[
(val) => (val) =>
(val && val.length > 0) || (val && val.length > 0) ||
$t('Please type something'), $t('Please type something'),
(val) => checkLoginIpaddress,
val == 'localhost' ||
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
val
) ||
$t('Please input vaild ip address'),
]" ]"
@keydown=" @keydown="
(evt) => { (evt) => {
@ -210,6 +211,7 @@ class _Data {
loading = false; loading = false;
ip_address = window.location.hostname; ip_address = window.location.hostname;
show_password = false; show_password = false;
websocket_port = GlobalData.kDefaultWebsocektPort;
constructor() { constructor() {
let temp = LocalStorage.getItem("default_ip_address"); let temp = LocalStorage.getItem("default_ip_address");
@ -306,6 +308,10 @@ export default defineComponent({
} }
} catch {} } catch {}
if (data.websocket_port != GlobalData.kDefaultWebsocektPort) {
data.ip_address += ":" + data.websocket_port;
}
return { return {
login_form, login_form,
data, data,
@ -317,12 +323,22 @@ export default defineComponent({
return new Promise((resolve) => { return new Promise((resolve) => {
data.loading = true; data.loading = true;
try { try {
const pos = data.ip_address.lastIndexOf(":");
let target_ip = data.ip_address;
let target_port = GlobalData.kDefaultWebsocektPort;
if (pos != -1) {
target_ip = data.ip_address.substring(0, pos);
const port = parseInt(data.ip_address.substring(pos + 1));
if (!isNaN(port) && port != Infinity) {
target_port = port;
}
}
let global_data = GlobalData.getInstance(); let global_data = GlobalData.getInstance();
const url = const url =
"ws://" + "ws://" +
data.ip_address + target_ip +
":" + ":" +
GlobalData.kDefaultWebsocektPort.toString() + target_port +
GlobalData.kWebsocketResource; GlobalData.kWebsocketResource;
web_socket = new ClientConnection( web_socket = new ClientConnection(
url, url,
@ -439,6 +455,37 @@ export default defineComponent({
data.password = null; data.password = null;
remember_password.value = false; remember_password.value = false;
}, },
checkLoginIpaddress(val: string) {
const is_ip_addrss = (ip: string) => {
return /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
ip
);
};
const is_port = (port: string) => {
return /^(:?)([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(
port
);
};
if (val.trim() == "localhost") {
return true;
} else {
const pos = val.lastIndexOf(":");
if (pos == -1) {
return is_ip_addrss(val) || $t.t("Please input vaild ip address");
} else {
const str_ip = val.substring(0, pos);
const str_port = val.substring(pos + 1);
if (str_port) {
return (
(is_ip_addrss(str_ip) && is_port(str_port)) ||
$t.t("Please input vaild ip address")
);
}
}
}
},
}; };
}, },
}); });