fix: 修复多窗口打开时登录登出状态同步问题

xinkeaboard-web/app.vue

@@ -66,6 +66,17 @@ onMounted(() => {
   nextTick(()=>{
     googleTranslateInit()
   })
+
+  window.addEventListener('storage', function (e) {
+    if (e.key === 'isLoggedIn') {
+      // 如果当前页面是目标页面，则不要刷新
+      if (!sessionStorage.getItem('noRefresh')) {
+        location.reload();  // 其他页面刷新
+      }
+      localStorage.removeItem('isLoggedIn')
+      sessionStorage.removeItem('noRefresh')
+    }
+  });
 })
 
 

xinkeaboard-web/components/NavTopBar.vue

@@ -148,6 +148,8 @@ const loginOut = async () => {
   filtersStore.setToken("");
   filtersStore.setRefreshToken("");
   filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
+  sessionStorage.setItem('noRefresh', 'true')
+  localStorage.setItem('isLoggedIn', 'false');
   // window.location.reload();
 };
 

xinkeaboard-web/components/SldDiy.vue

@@ -1226,7 +1226,8 @@ const loginOut = async () => {
   filtersStore.setToken("");
   filtersStore.setRefreshToken("");
   filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
-  window.location.reload();
+  sessionStorage.setItem('noRefresh', 'true')
+  localStorage.setItem('isLoggedIn', 'false');
 };
 
 const goSupplierUrl = () => {

xinkeaboard-web/components/register/RegisterAccount.vue

@@ -155,7 +155,6 @@ const showPwdFlag = ref(false); //密码是否明文显示，默认密文
 const showConfirmPwdFlag = ref(false); // 二次密码是否明文显示，默认密文
 const joinForFreeLoading = ref(false);
 const checkPwdErrorMsg = ref("");
-const focusPasword = ref(false);
 
 const joinForFreeDisabled = computed(
   () => !name.value || !password.value || !confirmPassword.value
@@ -230,7 +229,6 @@ const checkPwdMatched = () => {
 };
 
 const checkPwdValidate = () => {
-  focusPasword.value = false;
   const regex = /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{6,20}$/;
   if (regex.test(password.value)) {
     checkPwdErrorMsg.value = "";

xinkeaboard-web/components/retrieve/RetrievePassword.vue

@@ -40,7 +40,7 @@
       />
       <span class="verify-code-accept">
         <el-button
-          @click="getVerifyCode"
+          @click="showHMVerify"
           :disabled="countDownNumer"
           :loading="getVerifyCodeLoading"
         >
@@ -64,8 +64,10 @@
       <input
         :type="showPwdFlag ? 'text' : 'password'"
         v-model="password"
-        :placeholder="L['请输入6～20位英文、数字、符号']"
+        :placeholder="L['请输入密码']"
         class="input"
+        @focus="checkPwdValidate"
+        @blur="checkPwdValidate"
       />
       <div class="cancel" @click="isShowPwd">
         <span
@@ -81,6 +83,13 @@
           }"
         ></span>
       </div>
+      <div class="error" v-if="checkPwdErrorMsg">
+        <span
+          style="color: #e1251b; font-size: 14px"
+          class="iconfont icon-jubao"
+        ></span>
+        {{ checkPwdErrorMsg }}
+      </div>
     </div>
     <div class="item confirm">
       <span style="color: #bbb; font-size: 21px; padding-top: 7px" class="icon"
@@ -160,8 +169,6 @@ const modalVisible = ref(false);
 
 // 重新获取验证码标识
 const isReacquireCode = ref(false);
-// 人机校验通过标识符
-const isHMVerifySuccess = ref(false);
 
 const checkErrorMsg = ref(""); // 密码一致性错误提示
 const password = ref(""); //密码
@@ -170,6 +177,7 @@ const showPwdFlag = ref(false); //密码是否明文显示，默认密文
 const showConfirmPwdFlag = ref(false); // 二次密码是否明文显示，默认密文
 
 const forgetPwdLoading = ref(false);
+const checkPwdErrorMsg = ref("");
 
 const forgetPwdDisabled = computed(
   () => !memberEmail.value || !password.value || !confirmPassword.value
@@ -182,29 +190,45 @@ const codeText = computed(() => {
     : L["register"]["获取验证码"];
 });
 
-const isPasswordMatched = computed(
-  () => password.value === confirmPassword.value
-);
 
 //密码是否显示
 const isShowPwd = () => {
   showPwdFlag.value = !showPwdFlag.value;
 };
 
+const checkPwdValidate = () => {
+  const regex = /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]{6,20}$/;
+  if (regex.test(password.value)) {
+    checkPwdErrorMsg.value = "";
+    return true;
+  }
+  checkPwdErrorMsg.value = L["请输入6～20位英文、数字、符号"];
+  return false;
+};
+
+//开启人机校验
+const showHMVerify = () => {
+  // 校验邮箱非空以及格式
+  if (!validateEmail()) return;
+  modalVisible.value = true;
+};
+
 // 二次确认密码是否显示
 const isShowConfirmPwd = () => {
   showConfirmPwdFlag.value = !showConfirmPwdFlag.value;
 };
 
 const checkPwdMatched = () => {
-  checkErrorMsg.value = isPasswordMatched.value
-    ? ""
-    : L["register"]["两次输入的密码不一致"];
+  if (password.value === confirmPassword.value) {
+    checkErrorMsg.value = "";
+    return true;
+  }
+  checkErrorMsg.value = L["register"]["两次输入的密码不一致"];
+  return false;
 };
 
 // 人机验证成功
 const verifySuccess = () => {
-  isHMVerifySuccess.value = true;
   modalVisible.value = false;
   getVerifyCode();
 };
@@ -255,41 +279,35 @@ const validateEmailCode = () => {
 };
 
 const getVerifyCode = () => {
-  if (!validateEmail()) return;
-  if (!isHMVerifySuccess.value) {
-    modalVisible.value = true;
-  } else {
-    getVerifyCodeLoading.value = true;
-    post("v3/member/front/active/verification/code", {
-      email: memberEmail.value,
-      source: 1,
-      type: 2, // 忘记密码
+  getVerifyCodeLoading.value = true;
+  post("v3/member/front/active/verification/code", {
+    email: memberEmail.value,
+    source: 1,
+    type: 2, // 忘记密码
+  })
+    .then((res) => {
+      if (res.state === 200) {
+        showMessage({
+          message: L["register"]["验证码已发送"],
+          type: "success",
+        });
+        // 设置倒计时
+        startCountdown(60, (time) => (countDownNumer.value = time));
+        isReacquireCode.value = true;
+      } else {
+        showMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
     })
-      .then((res) => {
-        if (res.state === 200) {
-          showMessage({
-            message: L["register"]["验证码已发送"],
-            type: "success",
-          });
-          // 设置倒计时
-          startCountdown(60, (time) => (countDownNumer.value = time));
-          isReacquireCode.value = true;
-        } else {
-          showMessage({
-            message: res.msg,
-            type: "warning",
-          });
-        }
-      })
-      .finally(() => {
-        getVerifyCodeLoading.value = false;
-      });
-  }
+    .finally(() => {
+      getVerifyCodeLoading.value = false;
+    });
 };
 
 const forgetPwd = () => {
   if (!validateEmail() || !validateEmailCode()) return;
-  if (!isPasswordMatched.value) return;
   forgetPwdLoading.value = true;
   post("v3/member/front/active/email/reset/pwdNew", {
     confirmPassWord: confirmPassword.value,
@@ -391,7 +409,7 @@ watch(emailCode, (val) => {
     :before {
       position: absolute;
       top: 9px;
-      left: 14px;
+      // left: 14px;
     }
   }
 

xinkeaboard-web/pages/login.vue

@@ -242,6 +242,8 @@ const login = () => {
             router.replace({
               path: '/'
             })
+            sessionStorage.setItem('noRefresh', 'true')
+            localStorage.setItem('isLoggedIn', 'true');
             // if (window.history.state.back) {
             //   router.replace({
             //     path: '/'