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

src/boot/axios.ts

@@ -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";

src/pages/Login.vue

@@ -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="
+                      :hint="$t('please input server ip address')"
-                        $t('please input server ip address') +
-                        ', ' +
-                        $t('example') +
-                        ':' +
-                        '192.168.1.1:1234'
-                      "
                       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 =
+            api
-              "ws://" +
+              .get("/get_websocket_port")
-              target_ip +
+              .then((response) => {
-              ":" +
+                let final_ws_port = GlobalData.kDefaultWebsocektPort;
-              target_port +
+                if (response && typeof response.data != "undefined") {
-              GlobalData.kWebsocketResource;
+                  if (typeof response.data != "number") {
-            web_socket = new ClientConnection(
+                    const temp_port = parseInt(response.data);
-              url,
+                    if (!isNaN(temp_port) && temp_port != Infinity) {
-              data.user_name,
+                      final_ws_port = temp_port;
-              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,
                     }
+                  } 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 {
+                  let timer = setTimeout(() => {
-                  Cookies.remove("remember_password");
+                    web_socket?.destory();
-                  Cookies.remove("auto_login");
+                    web_socket = null;
-                  Cookies.remove("name");
+                    $q.notify({
-                  Cookies.remove("user_name");
+                      color: "negative",
-                  Cookies.remove("password");
+                      icon: "warning",
-                }
+                      message:
-
+                        $t.t("login fail!") +
-                $store.commit("setDeviceIpAddress", data.ip_address);
+                        $t.t("connect time out!") +
-
+                        $t.t(
-                setTimeout(() => {
+                          "please check server state, or check server ip address!"
-                  new Initializer({
+                        ),
-                    $t,
+                      position: "center",
-                    $store,
+                      timeout: 1500,
-                    $q,
-                  })
-                    .initialize()
-                    .then(() => {
-                      $store.commit("setInitialized");
                     });
-                }, 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("/");
+                      SessionStorage.set("auth", PermissionLevel.Root);
-              } else {
+                      SessionStorage.set("url", url);
-                $q.notify({
+                      SessionStorage.set("name", data.ip_address);
-                  color: "negative",
+                      SessionStorage.set("user_name", data.user_name);
-                  icon: "warning",
+                      SessionStorage.set(
-                  message:
+                        "password",
-                    $t.t("login fail!") + $t.t("user or password error!"),
+                        data.password == cache_password
-                  position: "center",
+                          ? data.password
-                  timeout: 1500,
+                          : Md5.hashStr(data.password ?? "admin")
-                });
+                      );
-                SessionStorage.set("auth", PermissionLevel.None);
+
-              }
+                      // TODO add self to setConnects
-              resolve(true);
+
-              data.loading = false;
+                      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")
-              );
-            }
-          }
-        }
-      },
     };
   },
 });