邮箱验证码 超时

src/App.vue

@@ -10,12 +10,17 @@
 </template>
 
 <script>
+import { removeSession } from "@/utils/role";
+import { removeToken } from "@/utils/auth";
+import Cookies from "js-cookie";
+import { getConfig } from "@/utils/auth";
 export default {
   name: "App",
   data() {
     return {
       dir: "ltr",
       userAgentTipShow: false,
+      timeOut: null
     };
   },
   created() {
@@ -24,6 +29,21 @@ export default {
       this.dir = "rtl";
     }
     this.handleUserAgentRoot()
+    window.addEventListener(
+        'click',()=>{
+            sessionStorage.setItem('lastClickTime',new Date().getTime())
+        }
+    )
+    window.addEventListener(
+        'mousewheel',()=>{
+            sessionStorage.setItem('lastClickTime',new Date().getTime())
+        }
+    )
+    window.addEventListener(
+        'mousemove',()=>{
+            sessionStorage.setItem('lastClickTime',new Date().getTime())
+        }
+    )
   },
   methods:{
       // 判断是否为chrome浏览器 
@@ -36,7 +56,30 @@ export default {
           sessionStorage.setItem("useragent_root_close", true);
           this.userAgentTipShow = false
       },
-  }
+      // 是否超时
+    isTimeOut(){
+        clearInterval(this.timeOut)
+        this.timeOut = setInterval(()=>{
+            let lastClickTime = sessionStorage.getItem('lastClickTime')*1
+            let nowTime = new Date().getTime()
+            let dataConfig = JSON.parse(getConfig());
+            if(nowTime - lastClickTime > 1000 * dataConfig.user_connection_timeout_duration){
+                clearInterval(this.timeOut)
+                removeSession("SysList");
+                removeToken();
+                Cookies.remove("JSESSIONID");
+                this.userShow = false;
+                this.userMessage = null;
+                sessionStorage.removeItem("useragent_root_close");
+                window.location.href = dataConfig.sys_home_url
+            }
+        })
+    }
+  },
+  mounted(){
+    sessionStorage.setItem('lastClickTime',new Date().getTime())
+    this.isTimeOut()
+  },
 };
 </script>
 <style lang="scss" scoped>

src/components/login/login.vue

@@ -110,6 +110,20 @@
             />
           </div>
         </div>
+        <div class="verificationCode-box">
+          <input
+            type="text"
+            :class="'input'"
+            :placeholder="'邮箱验证码'"
+            v-model="emailCode"
+            @input="ChangeVericationCode"
+            maxlength="20"
+          />
+          <div class="verificationCode-btn" @click="getVerificationCode"
+                :class="VerificationCodeShow ? 'waitTime' : 'getVerification'">
+                {{ VerificationCodeShow ? time+'s' : $t("Key93") }}
+          </div>
+        </div>
       </template>
       <!-- 验证码登录   v-show="loginType == '验证码'"
        -->
@@ -211,7 +225,7 @@ import { setI18nLang } from "@/utils/i18n";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { UserAgreement },
-  props: ["ForgetType", "changeLoginReg", "changeLoginType", "getChildSysList"],
+  props: ["ForgetType", "changeLoginReg", "changeLoginType", "getChildSysList","changeEmailTips"],
   data() {
     //这里存放数据
     return {
@@ -233,6 +247,8 @@ export default {
       verificationCodeimg: "", // 图形验证码
       verificationCodeimgID: "", // 图形验证码ID
       verificationCodeLoading: true, // 图形验证码的flag
+      time: 60, //获取验证码的时间
+      emailCode: ""
     };
   },
   //计算属性 类似于data概念
@@ -261,6 +277,7 @@ export default {
     },
     ChangeVericationCode() {
       this.verificationCode = this.verificationCode.trim();
+      this.emailCode = this.emailCode.trim()
     },
     //选择密码登录和验证码登录
     selectLoginType(type) {
@@ -279,7 +296,37 @@ export default {
     },
     // 获取验证码
     getVerificationCode() {
-      this.VerificationCodeShow = true;
+      let this_ = this;
+      if(this_.time != 60){
+        return
+      }
+      let timer;
+      if (this_.email_phone) {
+        this_.VerificationCodeShow = true;
+        timer = setInterval(() => {
+          this_.time--;
+          if (this_.time == 0) {
+            this_.VerificationCodeShow = false;
+            clearInterval(timer);
+            timer = null;
+            this_.time = 60;
+          }
+        }, 1000);
+        let MethodName = "user_manager-SendVerificationCode";
+        let data = {
+          verification_type: 'EMAIL',
+          phone_or_email: this_.email_phone,
+        };
+        getLogin(MethodName, data).then((res) => {
+        }).catch(()=>{
+            this_.VerificationCodeShow = false;
+            clearInterval(timer);
+            timer = null;
+            this_.time = 60;
+        });
+      } else {
+        this_.$message.warning(this.$t("Key546"));
+      }
     },
     // 登录
     gotoLogin() {
@@ -315,6 +362,9 @@ export default {
         password: md5(this.password).toUpperCase(),
         verification_code_image_text: this.verificationCode,
         verification_code_image_id: this.verificationCodeimgID,
+        dynamic_verification_type:'EMAIL',
+        phone_or_email: this.email_phone,
+        dynamic_verification_code: this.emailCode
       };
       if (this.rememberMe) {
       } else {
@@ -322,28 +372,36 @@ export default {
       }
       getLogin(MethodName, data)
         .then((res) => {
-          this.$message.success(this.$t("Key442"));
-          this.changeLoginReg("", res);
           this.isLogin = false;
+          if(res.status==-5){
+            this.$message.error(res.error);
+            return;
+          }
+          this.changeLoginReg("", res);
           if (this.rememberMe) {
             let obj = {
-              email_phone: this.email_phone,
-              user_type: res.user_type,
+                email_phone: this.email_phone,
+                user_type: res.user_type,
             };
             localStorage.setItem("user_name", JSON.stringify(obj));
           }
-          setToken(res);
-          setI18nLang(this.language_type).then(() => {
-            if (
-              res.popedom_code_list.indexOf(2000001) > -1 ||
-              res.user_type == "STUDENT"
-            ) {
-              this.$message.warning(this.$t("Key247") + "....");
-              location.href = `/GCLS-Learn/#/EnterSys`;
-            } else {
-              this.getChildSysList();
-            }
-          });
+        setToken(res);
+          if(res.last_update_password_days>=res.sys_recommend_password_update_days){
+            this.changeEmailTips(res.last_update_password_days)
+          }else{
+            this.$message.success(this.$t("Key442"));
+            setI18nLang(this.language_type).then(() => {
+                if (
+                    res.popedom_code_list.indexOf(2000001) > -1 ||
+                    res.user_type == "STUDENT"
+                ) {
+                    this.$message.warning(this.$t("Key247") + "....");
+                    location.href = `/GCLS-Learn/#/EnterSys`;
+                } else {
+                    this.getChildSysList();
+                }
+            });
+          }
         })
         .catch((err) => {
           this.isLogin = false;
@@ -563,6 +621,23 @@ export default {
               cursor: pointer;
             }
           }
+          &.verificationCode-btn{
+            width: 128px;
+            margin-left: 5px;
+            background: #FF9900;
+            border-radius: 4px;
+            color: #fff;
+            font-weight: 700;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            &.waitTime{
+                background: #F0F0F0;
+                color: #6C6C6C;
+            }
+          }
         }
       }
     }

src/utils/role.js

@@ -0,0 +1,26 @@
+export function saveObjArr(name, data) { // localStorage 存储数组对象的方法
+  localStorage.setItem(name, JSON.stringify(data))
+}
+
+export function getObjArr(name) { // localStorage 获取数组对象的方法
+  return JSON.parse(localStorage.getItem(name));
+
+}
+
+export function removeObjArr(name) { // localStorage 获取数组对象的方法
+  localStorage.removeItem(name)
+}
+
+//session
+export function saveSession(name, data) { // localStorage 存储数组对象的方法
+  sessionStorage.setItem(name, JSON.stringify(data))
+}
+
+export function getSession(name) {
+  //localStorage 获取数组对象的方法
+  return JSON.parse(sessionStorage.getItem(name));
+}
+
+export function removeSession(name) { //localStorage 获取数组对象的方法
+  sessionStorage.removeItem(name)
+}

src/views/login/index.vue

@@ -32,6 +32,7 @@
               :changeLoginReg="changeLoginReg"
               :changeLoginType="changeLoginType"
               :getChildSysList="getChildSysList"
+              :changeEmailTips="changeEmailTips"
             />
           </div>
           <div
@@ -89,6 +90,18 @@
         <p>{{ $t("Key247") }}...</p>
       </div>
     </template>
+    <div class="emailTipsBox" v-if="emailTipShow">
+        <div class="emailTipsBox-innder">
+            <img
+                src="../../assets/login/close-forget.png"
+                class="close-win"
+                @click="closeEmailTip"
+            />
+            <h2>提示</h2>
+            <b>您已{{emailTipDay}}天未修改密码，为了账户安全，请更改密码。</b>
+            <a @click="changeLoginReg('Forget password')">好的</a>
+        </div>
+    </div>
   </div>
 </template>
 
@@ -253,6 +266,8 @@ export default {
       language_list: null,
       configInfor: null,
       isData: false,
+      emailTipShow: false,
+      emailTipDay: 0
     };
   },
   //计算属性 类似于data概念
@@ -270,6 +285,7 @@ export default {
         this.LoginOrRegistration = value;
       }
       this.userMessage = userMessage;
+      this.emailTipShow = false
     },
     changeLoginType(value) {
       this.loginType = value;
@@ -434,6 +450,14 @@ export default {
         this.LoginOrRegistration = "login";
       }
     },
+    changeEmailTips(data){
+        this.emailTipShow = true
+        this.emailTipDay = data
+    },
+    closeEmailTip(){
+        this.emailTipShow = false
+        this.browserRedirect();
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
@@ -694,5 +718,64 @@ export default {
       box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
     }
   }
+  .emailTipsBox{
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.19);
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+    .emailTipsBox-innder{
+        width: 395px;
+        min-height: 234px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -186px;
+        margin-top: -117px;
+        background: #FFFFFF;
+        border-radius: 8px;
+        padding: 32px 60px;
+        text-align: center;
+        img{
+            width: 14px;
+            height: 14px;
+            position: absolute;
+            right: 9px;
+            top: 9px;
+            cursor: pointer;
+        }
+        h2{
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 29px;
+            color: #FF9900;
+        }
+        b{
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 150%;
+            color: #2C2C2C;
+            display: block;
+        }
+        a{
+            height: 44px;
+            padding: 12px;
+            min-width: 80px;
+            background: #FF9900;
+            border-radius: 4px;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 20px;
+            color: #FFFFFF;
+            display: inline-block;
+            margin-top: 32px;
+        }
+    }
+  }
 }
 </style>