账号密码登录验证码

src/main.js

@@ -21,6 +21,7 @@ axios.defaults.baseURL = protocolName + "//" + domainName;
 Vue.prototype.$http = axios;
 Vue.config.productionTip = false;
 Vue.prototype.$host = protocolName + "//" + domainName;
+Vue.prototype.$baseURL = protocolName + "//" + domainName;
 //因项目众多，前端为了加以区分，所以用域名加以判断，后期有更好的方式可以自行修改
 // 中南财大
 Vue.prototype.isZncd = document.domain === 'itsm.zuel.edu.cn';

src/views/Login.vue

@@ -8,17 +8,16 @@
       运维管理平台
     </h2>
     <div v-if="requesterLgoinType == 'web'" style="width: 5rem">
-      <cube-input
-        v-model="zhanghao"
-        placeholder="您的账号为学工号"
-      ></cube-input>
-      <br />
-      <cube-input
-        v-model="mima"
-        type="password"
-        placeholder="您的初始密码为学工号后四位"
-      ></cube-input>
-      <br />
+      <div class="login_input">
+        <cube-input v-model="zhanghao" placeholder="您的账号为学工号"></cube-input>
+      </div>
+      <div class="login_input">
+        <cube-input v-model="mima" type="password" placeholder="您的初始密码为学工号后四位"></cube-input>
+      </div>
+      <div class="login_input" style="display: flex;">
+        <cube-input v-model="captcha" placeholder="请输入验证码" style="width: 50%;margin: 0 1%;"></cube-input>
+        <img style="width: 50%;margin: 0 1%;" :src="verificationCodeImg" @click="getVerificationCodeImg">
+      </div>
       <cube-button @click="zlogin()" style="background: #005395"
         >登录</cube-button
       >
@@ -41,6 +40,8 @@ export default {
     return {
       zhanghao: "",
       mima: "",
+      captcha: "",
+      verificationCodeImg: "",
       requesterLgoinType: "",
       isSSo: true, // 是否单点登录
     };
@@ -49,6 +50,10 @@ export default {
     LoadIng,
   },
   methods: {
+    // 获取验证码
+    getVerificationCodeImg(){
+      this.verificationCodeImg = `${this.$baseURL}/service/auth/getCaptcha?` + Date.now();
+    },
     // 登陆
     login() {
       var that = this;
@@ -201,6 +206,7 @@ export default {
             this.getCode();
           } else if (this.requesterLgoinType == "web") {
             // this.$router.push({ path: "/login" });
+            this.getVerificationCodeImg();
           }
         }
       });
@@ -225,10 +231,37 @@ export default {
         ssoStr = location.search.replace("?", "").split("&")[0].split("=")[1];
         ssoStr = decode(decodeURIComponent(ssoStr));
         ssoJson = JSON.parse(ssoStr);
+      }else if(!this.zhanghao || !this.zhanghao.trim()){
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "请输入用户名",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+          return;
+      }else if(!this.mima || !this.mima.trim()){
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "请输入密码",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+          return;
+      }else if(!this.captcha || !this.captcha.trim()){
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "请输入验证码",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+          return;
       }
       var postData = this.isSSo
         ? { username: ssoJson.a, password: ssoJson.u, t: false }
-        : { username: this.zhanghao, password: this.mima };
+        : { username: this.zhanghao, password: this.mima, captcha: this.captcha };
       postData = {
         k: this.encryptByEnAESLogin(JSON.stringify(postData))
       };
@@ -245,6 +278,16 @@ export default {
             JSON.stringify(res.data.data.requester)
           );
           this.getConfig();
+        } else if(res.data && res.data.state == 403){
+          // 403代表验证码校验失败
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "验证码错误",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+            this.getVerificationCodeImg();
         } else {
           that
             .$createDialog({
@@ -283,6 +326,9 @@ export default {
 </script>
 
 <style scoped>
+.login_input{
+  margin-bottom: 0.2rem;
+}
 .color {
   color: red;
   font-size: 1rem;