增加自动获取websocket的功能,登录界面隐藏IP地址输入框

This commit is contained in:
fangxiang 2022-07-22 14:35:39 +08:00
parent 2d64f768e5
commit da9f6928b8
2 changed files with 140 additions and 163 deletions

View File

@ -14,7 +14,7 @@ declare module "@vue/runtime-core" {
// "export default () => {}" function below (which runs individually // "export default () => {}" function below (which runs individually
// for each client) // for each client)
const api = axios.create({ const api = axios.create({
baseURL: "https://" + window.location.hostname, baseURL: window.location.origin,
timeout: 15000, timeout: 15000,
}); });
api.defaults.headers.common["X-Product-Name"] = "RK_3568"; api.defaults.headers.common["X-Product-Name"] = "RK_3568";

View File

@ -21,7 +21,7 @@
<q-card-section class="fit"> <q-card-section class="fit">
<q-form ref="login_form" @submit="onSubmit" @reset="onReset"> <q-form ref="login_form" @submit="onSubmit" @reset="onReset">
<q-list class="fit"> <q-list class="fit">
<q-item> <q-item v-if="$store.state.advanced_debug">
<q-item-section> <q-item-section>
<q-input <q-input
:autofocus="!data.ip_address" :autofocus="!data.ip_address"
@ -30,19 +30,18 @@
: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=" :hint="$t('please input server ip address')"
$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'),
checkLoginIpaddress, (val) =>
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) => {
@ -204,6 +203,7 @@ import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useStore } from "src/store"; import { useStore } from "src/store";
import { Md5 } from "ts-md5/dist/md5"; import { Md5 } from "ts-md5/dist/md5";
import Initializer from "src/common/Initializer"; import Initializer from "src/common/Initializer";
import { api } from "src/boot/axios";
class _Data { class _Data {
user_name: string | null = null; user_name: string | null = null;
@ -211,7 +211,6 @@ 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");
@ -293,7 +292,6 @@ export default defineComponent({
} }
if (remember_password.value) { if (remember_password.value) {
data.ip_address = Cookies.get("name") ?? data.ip_address;
data.user_name = Cookies.get("user_name") ?? data.user_name; data.user_name = Cookies.get("user_name") ?? data.user_name;
cache_password = Cookies.get("password"); cache_password = Cookies.get("password");
if ( if (
@ -308,10 +306,6 @@ 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,
@ -323,22 +317,25 @@ 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();
api
.get("/get_websocket_port")
.then((response) => {
let final_ws_port = GlobalData.kDefaultWebsocektPort;
if (response && typeof response.data != "undefined") {
if (typeof response.data != "number") {
const temp_port = parseInt(response.data);
if (!isNaN(temp_port) && temp_port != Infinity) {
final_ws_port = temp_port;
}
} else {
final_ws_port = response.data;
}
const url = const url =
"ws://" + "ws://" +
target_ip + data.ip_address +
":" + ":" +
target_port + final_ws_port.toString() +
GlobalData.kWebsocketResource; GlobalData.kWebsocketResource;
web_socket = new ClientConnection( web_socket = new ClientConnection(
url, url,
@ -389,12 +386,13 @@ export default defineComponent({
Cookies.set("remember_password", JSON.stringify(true), { Cookies.set("remember_password", JSON.stringify(true), {
expires: 15, expires: 15,
}); });
Cookies.set("auto_login", JSON.stringify(auto_login.value), { Cookies.set(
"auto_login",
JSON.stringify(auto_login.value),
{
expires: 15, expires: 15,
}); }
Cookies.set("name", data.ip_address, { );
expires: 15,
});
Cookies.set("user_name", data.user_name ?? "admin", { Cookies.set("user_name", data.user_name ?? "admin", {
expires: 15, expires: 15,
}); });
@ -444,6 +442,16 @@ export default defineComponent({
resolve(true); resolve(true);
data.loading = false; data.loading = false;
}; };
}
})
.catch(() => {
resolve(true);
data.loading = false;
})
.finally(() => {
resolve(true);
data.loading = false;
});
} catch { } catch {
resolve(true); resolve(true);
data.loading = false; data.loading = false;
@ -455,37 +463,6 @@ 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")
);
}
}
}
},
}; };
}, },
}); });