增加双因子校验问题

sgzb-ui/src/api/login.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
+export function login(username, password, code, uuid, textCode) {
   return request({
     url: '/auth/login',
     headers: {
@@ -10,7 +10,7 @@ export function login(username, password, code, uuid) {
     },
     method: 'post',
     timeout: 20000,
-    data: { username, password, code, uuid }
+    data: { username, password, code, uuid, textCode }
   })
 }
 
@@ -73,6 +73,17 @@ export function sendCode(data) {
     data: data
   })
 }
+// 短信验证码
+export function sendCodeNew(data) {
+  return request({
+    url: '/auth/loginByCode',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
 // 短信验证码--登录
 export function checkCode(data) {
   return request({

sgzb-ui/src/store/modules/user.js

@@ -44,10 +44,13 @@ const user = {
       const password = encrypt(userInfo.password)
       const code = userInfo.code
       const uuid = userInfo.uuid
-      const textCode = undefined
+      const textCode = userInfo.textCode
-      if (userInfo.textCode) {
+
-        textCode = userInfo.textCode
+      console.log(userInfo.textCode, userInfo, '******************')
-      }
+      // const textCode = undefined
+      // if (userInfo.textCode) {
+      //   textCode = userInfo.textCode
+      // }
       return new Promise((resolve, reject) => {
         login(username, password, code, uuid, textCode).then(res => {
           let data = res.data

sgzb-ui/src/views/newLogin.vue

@@ -26,37 +26,32 @@
               </el-form-item>
 
               <!-- 5.29 新增双因子验证 -->
-              <!-- <el-form-item prop="textCode" class="code-container" v-if="loginForm.username === 'admin'">
+              <el-form-item prop="textCode" class="code-container" v-if="loginForm.username === 'admin'">
-                <el-input
+                <el-input v-model="loginForm.textCode" placeholder="短信验证码" style="width: 67%">
-                  v-model="phoneLoginParams.textCode"
-                  auto-complete="off"
-                  placeholder="短信验证码"
-                  style="width: 67%"
-                >
                   <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                 </el-input>
                 <div class="login-code">
                   <div
                     class="login-code-img"
                     style="border: 1px solid rgb(220, 223, 230)"
-                    v-show="show === 1"
+                    v-show="showNew === 1"
-                    @click="getTextCode"
+                    @click="getTextCodeNew"
                   >
                     获取验证码
                   </div>
-                  <div class="login-code-img" style="border: 1px solid rgb(220, 223, 230)" v-show="show === 2">
+                  <div class="login-code-img" style="border: 1px solid rgb(220, 223, 230)" v-show="showNew === 2">
-                    {{ count }} s
+                    {{ countNew }} s
                   </div>
                   <div
                     class="login-code-img"
                     style="border: 1px solid rgb(220, 223, 230)"
-                    v-show="show === 3"
+                    v-show="showNew === 3"
-                    @click="getTextCode"
+                    @click="getTextCodeNew"
                   >
                     重发
                   </div>
                 </div>
-              </el-form-item> -->
+              </el-form-item>
               <el-form-item prop="code" v-if="captchaEnabled" class="code-container">
                 <el-input
                   v-model="loginForm.code"
@@ -218,11 +213,40 @@
         <el-button type="primary" @click="submitSendCode()">确 定</el-button>
       </span>
     </el-dialog>
+
+    <!-- 图形验证码弹框 2 -->
+    <el-dialog
+      title="请输入图形验证码"
+      :visible.sync="dialogCodeVisibleNew"
+      v-if="dialogCodeVisibleNew"
+      width="30%"
+      :before-close="handleCloseNew"
+    >
+      <el-form ref="phoneLoginCodeFormNewRef" :model="phoneLoginParamsNew" :rules="phoneLoginCodeNewRules">
+        <el-form-item prop="code" v-if="captchaEnabled" class="code-container">
+          <el-input
+            v-model="phoneLoginParamsNew.code"
+            auto-complete="off"
+            placeholder="图形验证码"
+            @keyup.enter.native="textLogin"
+            style="width: 70%"
+          >
+            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          </el-input>
+          <div class="login-code">
+            <img :src="phoneCodeUrlNew" @click="getCode(3)" class="login-code-img" style="width: 100%" />
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitSendCodeNew()">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCodeImg, sendCode } from '@/api/login'
+import { getCodeImg, sendCode, sendCodeNew } from '@/api/login'
 import Cookies from 'js-cookie'
 import { encrypt, decrypt } from '@/utils/jsencrypt'
 
@@ -238,6 +262,7 @@ export default {
         rememberMe: false,
         code: '', // 账户密码登录时的图片验证码
         uuid: '',
+        textCode: '',
       },
 
       /* 手机号码登录时参数 */
@@ -247,6 +272,10 @@ export default {
         textCode: '',
         uuid: '',
       },
+      // 获取短信验证码参数
+      phoneLoginParams: {
+        code: '',
+      },
       // 账户密码登录时的校验规则
       loginRules: {
         username: [
@@ -270,6 +299,13 @@ export default {
             message: '请输入验证码',
           },
         ],
+        textCode: [
+          {
+            required: true,
+            trigger: 'blur',
+            message: '请输入短信验证码',
+          },
+        ],
       },
       // 手机号登录时的校验规则
       phoneLoginRules: {
@@ -302,6 +338,15 @@ export default {
           },
         ],
       },
+      phoneLoginCodeNewRules: {
+        code: [
+          {
+            required: true,
+            trigger: 'blur',
+            message: '请输入图形验证码',
+          },
+        ],
+      },
       loading: false,
       // 验证码开关
       captchaEnabled: true,
@@ -315,6 +360,15 @@ export default {
       timer: null,
       dialogCodeVisible: false, // 图形验证码弹框
       loginParams: {}, //登录页面地址栏参数
+      phoneCodeUrlNew: '',
+      phoneLoginParamsNew: {
+        uuid: '',
+        username: '',
+      },
+      dialogCodeVisibleNew: false,
+      timerNew: null,
+      showNew: 1,
+      countNew: '',
     }
   },
   watch: {
@@ -364,9 +418,12 @@ export default {
           if (type === 1) {
             this.codeUrl = 'data:image/gif;base64,' + res.img
             this.loginForm.uuid = res.uuid
-          } else {
+          } else if (type === 2) {
             this.phoneCodeUrl = 'data:image/gif;base64,' + res.img
             this.phoneLoginParams.uuid = res.uuid
+          } else {
+            this.phoneCodeUrlNew = 'data:image/gif;base64,' + res.img
+            this.phoneLoginParamsNew.uuid = res.uuid
           }
         }
       })
@@ -385,6 +442,44 @@ export default {
       })
     },
 
+    // 登录用户为admin 时获取短信验证码按钮
+    getTextCodeNew() {
+      this.getCode(3)
+      this.dialogCodeVisibleNew = true
+    },
+
+    submitSendCodeNew() {
+      this.$refs.phoneLoginCodeFormNewRef.validate(valid => {
+        if (valid) {
+          this.phoneLoginParamsNew.username = this.loginForm.username
+          sendCodeNew(this.phoneLoginParamsNew)
+            .then(res => {
+              if (res.code == 200) {
+                this.$modal.msgSuccess('发送成功')
+                const TIME_COUNT = 60
+                if (!this.timerNew) {
+                  this.countNew = TIME_COUNT
+                  this.showNew = 2
+                  this.timerNew = setInterval(() => {
+                    if (this.countNew > 0 && this.countNew <= TIME_COUNT) {
+                      this.countNew--
+                    } else {
+                      this.showNew = 3
+                      clearInterval(this.timerNew)
+                      this.timerNew = null
+                    }
+                  }, 1000)
+                }
+                this.dialogCodeVisibleNew = false
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        }
+      })
+    },
+
     /* 图形验证码弹框中确定按钮 */
     submitSendCode() {
       this.$refs.phoneLoginCodeFormRef.validate(valid => {
@@ -428,6 +523,12 @@ export default {
       this.$refs['phoneLoginCodeFormRef'].clearValidate()
       this.phoneLoginParams.code = ''
     },
+    /* 关闭验证码弹框 */
+    handleCloseNew() {
+      this.dialogCodeVisibleNew = false
+      this.$refs['phoneLoginCodeFormNewRef'].clearValidate()
+      this.phoneLoginParamsNew.code = ''
+    },
     getCookie() {
       const username = Cookies.get('username')
       const password = Cookies.get('password')
@@ -441,6 +542,7 @@ export default {
 
     // 账户密码登录-------------------------------------------------------------
     handleLogin() {
+      console.log(this.loginForm, '参数-----')
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true