增加自动获取websocket的功能，登录界面隐藏IP地址输入框
This commit is contained in:
fangxiang
parent
2d64f768e5
commit
da9f6928b8
|
|
@ -14,7 +14,7 @@ declare module "@vue/runtime-core" {
|
|||
// "export default () => {}" function below (which runs individually
|
||||
// for each client)
|
||||
const api = axios.create({
|
||||
baseURL: "https://" + window.location.hostname,
|
||||
baseURL: window.location.origin,
|
||||
timeout: 15000,
|
||||
});
|
||||
api.defaults.headers.common["X-Product-Name"] = "RK_3568";
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<q-card-section class="fit">
|
||||
<q-form ref="login_form" @submit="onSubmit" @reset="onReset">
|
||||
<q-list class="fit">
|
||||
<q-item>
|
||||
<q-item v-if="$store.state.advanced_debug">
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:autofocus="!data.ip_address"
|
||||
|
|
@ -30,19 +30,18 @@
|
|||
:disable="data.loading"
|
||||
v-model="data.ip_address"
|
||||
:label="$t('server ip address')"
|
||||
:hint="
|
||||
$t('please input server ip address') +
|
||||
', ' +
|
||||
$t('example') +
|
||||
':' +
|
||||
'192.168.1.1:1234'
|
||||
"
|
||||
:hint="$t('please input server ip address')"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) ||
|
||||
$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="
|
||||
(evt) => {
|
||||
|
|
@ -204,6 +203,7 @@ import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
|||
import { useStore } from "src/store";
|
||||
import { Md5 } from "ts-md5/dist/md5";
|
||||
import Initializer from "src/common/Initializer";
|
||||
import { api } from "src/boot/axios";
|
||||
|
||||
class _Data {
|
||||
user_name: string | null = null;
|
||||
|
|
@ -211,7 +211,6 @@ class _Data {
|
|||
loading = false;
|
||||
ip_address = window.location.hostname;
|
||||
show_password = false;
|
||||
websocket_port = GlobalData.kDefaultWebsocektPort;
|
||||
|
||||
constructor() {
|
||||
let temp = LocalStorage.getItem("default_ip_address");
|
||||
|
|
@ -293,7 +292,6 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
if (remember_password.value) {
|
||||
data.ip_address = Cookies.get("name") ?? data.ip_address;
|
||||
data.user_name = Cookies.get("user_name") ?? data.user_name;
|
||||
cache_password = Cookies.get("password");
|
||||
if (
|
||||
|
|
@ -308,10 +306,6 @@ export default defineComponent({
|
|||
}
|
||||
} catch {}
|
||||
|
||||
if (data.websocket_port != GlobalData.kDefaultWebsocektPort) {
|
||||
data.ip_address += ":" + data.websocket_port;
|
||||
}
|
||||
|
||||
return {
|
||||
login_form,
|
||||
data,
|
||||
|
|
@ -323,127 +317,141 @@ export default defineComponent({
|
|||
return new Promise((resolve) => {
|
||||
data.loading = true;
|
||||
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();
|
||||
const url =
|
||||
"ws://" +
|
||||
target_ip +
|
||||
":" +
|
||||
target_port +
|
||||
GlobalData.kWebsocketResource;
|
||||
web_socket = new ClientConnection(
|
||||
url,
|
||||
data.user_name,
|
||||
data.password == cache_password
|
||||
? data.password
|
||||
: Md5.hashStr(data.password ?? "admin")
|
||||
);
|
||||
let timer = setTimeout(() => {
|
||||
web_socket?.destory();
|
||||
web_socket = null;
|
||||
$q.notify({
|
||||
color: "negative",
|
||||
icon: "warning",
|
||||
message:
|
||||
$t.t("login fail!") +
|
||||
$t.t("connect time out!") +
|
||||
$t.t(
|
||||
"please check server state, or check server ip address!"
|
||||
),
|
||||
position: "center",
|
||||
timeout: 1500,
|
||||
});
|
||||
SessionStorage.set("auth", PermissionLevel.None);
|
||||
resolve(false);
|
||||
data.loading = false;
|
||||
}, 5000);
|
||||
web_socket.login_callback = (is_login) => {
|
||||
clearTimeout(timer);
|
||||
if (is_login && web_socket) {
|
||||
global_data.addClient(data.ip_address, web_socket);
|
||||
global_data.setCurrentClientName(data.ip_address);
|
||||
|
||||
SessionStorage.set("auth", PermissionLevel.Root);
|
||||
SessionStorage.set("url", url);
|
||||
SessionStorage.set("name", data.ip_address);
|
||||
SessionStorage.set("user_name", data.user_name);
|
||||
SessionStorage.set(
|
||||
"password",
|
||||
data.password == cache_password
|
||||
? data.password
|
||||
: Md5.hashStr(data.password ?? "admin")
|
||||
);
|
||||
|
||||
// TODO add self to setConnects
|
||||
|
||||
if (remember_password.value) {
|
||||
Cookies.set("remember_password", JSON.stringify(true), {
|
||||
expires: 15,
|
||||
});
|
||||
Cookies.set("auto_login", JSON.stringify(auto_login.value), {
|
||||
expires: 15,
|
||||
});
|
||||
Cookies.set("name", data.ip_address, {
|
||||
expires: 15,
|
||||
});
|
||||
Cookies.set("user_name", data.user_name ?? "admin", {
|
||||
expires: 15,
|
||||
});
|
||||
Cookies.set(
|
||||
"password",
|
||||
data.password == cache_password
|
||||
? data.password ?? Md5.hashStr("admin")
|
||||
: Md5.hashStr(data.password ?? "admin"),
|
||||
{
|
||||
expires: 15,
|
||||
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 =
|
||||
"ws://" +
|
||||
data.ip_address +
|
||||
":" +
|
||||
final_ws_port.toString() +
|
||||
GlobalData.kWebsocketResource;
|
||||
web_socket = new ClientConnection(
|
||||
url,
|
||||
data.user_name,
|
||||
data.password == cache_password
|
||||
? data.password
|
||||
: Md5.hashStr(data.password ?? "admin")
|
||||
);
|
||||
} else {
|
||||
Cookies.remove("remember_password");
|
||||
Cookies.remove("auto_login");
|
||||
Cookies.remove("name");
|
||||
Cookies.remove("user_name");
|
||||
Cookies.remove("password");
|
||||
}
|
||||
|
||||
$store.commit("setDeviceIpAddress", data.ip_address);
|
||||
|
||||
setTimeout(() => {
|
||||
new Initializer({
|
||||
$t,
|
||||
$store,
|
||||
$q,
|
||||
})
|
||||
.initialize()
|
||||
.then(() => {
|
||||
$store.commit("setInitialized");
|
||||
let timer = setTimeout(() => {
|
||||
web_socket?.destory();
|
||||
web_socket = null;
|
||||
$q.notify({
|
||||
color: "negative",
|
||||
icon: "warning",
|
||||
message:
|
||||
$t.t("login fail!") +
|
||||
$t.t("connect time out!") +
|
||||
$t.t(
|
||||
"please check server state, or check server ip address!"
|
||||
),
|
||||
position: "center",
|
||||
timeout: 1500,
|
||||
});
|
||||
}, 0);
|
||||
SessionStorage.set("auth", PermissionLevel.None);
|
||||
resolve(false);
|
||||
data.loading = false;
|
||||
}, 5000);
|
||||
web_socket.login_callback = (is_login) => {
|
||||
clearTimeout(timer);
|
||||
if (is_login && web_socket) {
|
||||
global_data.addClient(data.ip_address, web_socket);
|
||||
global_data.setCurrentClientName(data.ip_address);
|
||||
|
||||
$route.push("/");
|
||||
} else {
|
||||
$q.notify({
|
||||
color: "negative",
|
||||
icon: "warning",
|
||||
message:
|
||||
$t.t("login fail!") + $t.t("user or password error!"),
|
||||
position: "center",
|
||||
timeout: 1500,
|
||||
});
|
||||
SessionStorage.set("auth", PermissionLevel.None);
|
||||
}
|
||||
resolve(true);
|
||||
data.loading = false;
|
||||
};
|
||||
SessionStorage.set("auth", PermissionLevel.Root);
|
||||
SessionStorage.set("url", url);
|
||||
SessionStorage.set("name", data.ip_address);
|
||||
SessionStorage.set("user_name", data.user_name);
|
||||
SessionStorage.set(
|
||||
"password",
|
||||
data.password == cache_password
|
||||
? data.password
|
||||
: Md5.hashStr(data.password ?? "admin")
|
||||
);
|
||||
|
||||
// TODO add self to setConnects
|
||||
|
||||
if (remember_password.value) {
|
||||
Cookies.set("remember_password", JSON.stringify(true), {
|
||||
expires: 15,
|
||||
});
|
||||
Cookies.set(
|
||||
"auto_login",
|
||||
JSON.stringify(auto_login.value),
|
||||
{
|
||||
expires: 15,
|
||||
}
|
||||
);
|
||||
Cookies.set("user_name", data.user_name ?? "admin", {
|
||||
expires: 15,
|
||||
});
|
||||
Cookies.set(
|
||||
"password",
|
||||
data.password == cache_password
|
||||
? data.password ?? Md5.hashStr("admin")
|
||||
: Md5.hashStr(data.password ?? "admin"),
|
||||
{
|
||||
expires: 15,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
Cookies.remove("remember_password");
|
||||
Cookies.remove("auto_login");
|
||||
Cookies.remove("name");
|
||||
Cookies.remove("user_name");
|
||||
Cookies.remove("password");
|
||||
}
|
||||
|
||||
$store.commit("setDeviceIpAddress", data.ip_address);
|
||||
|
||||
setTimeout(() => {
|
||||
new Initializer({
|
||||
$t,
|
||||
$store,
|
||||
$q,
|
||||
})
|
||||
.initialize()
|
||||
.then(() => {
|
||||
$store.commit("setInitialized");
|
||||
});
|
||||
}, 0);
|
||||
|
||||
$route.push("/");
|
||||
} else {
|
||||
$q.notify({
|
||||
color: "negative",
|
||||
icon: "warning",
|
||||
message:
|
||||
$t.t("login fail!") + $t.t("user or password error!"),
|
||||
position: "center",
|
||||
timeout: 1500,
|
||||
});
|
||||
SessionStorage.set("auth", PermissionLevel.None);
|
||||
}
|
||||
resolve(true);
|
||||
data.loading = false;
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
resolve(true);
|
||||
data.loading = false;
|
||||
})
|
||||
.finally(() => {
|
||||
resolve(true);
|
||||
data.loading = false;
|
||||
});
|
||||
} catch {
|
||||
resolve(true);
|
||||
data.loading = false;
|
||||
|
|
@ -455,37 +463,6 @@ export default defineComponent({
|
|||
data.password = null;
|
||||
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