支持PC端支持使用IP+端口的方式登录
This commit is contained in:
parent
51b8f27717
commit
cea6a98a4a
|
@ -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();
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
|
@ -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:",
|
||||||
};
|
};
|
||||||
|
|
|
@ -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")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue