vue2 验证码，增加开关、修复对社交登录的支持

Author: YunaiV

.env.demo1024

@@ -17,6 +17,9 @@ VUE_APP_APP_NAME ='/admin-ui/'
 # 多租户的开关
 VUE_APP_TENANT_ENABLE = true
 
+# 验证码的开关
+VUE_APP_CAPTCHA_ENABLE = true
+
 # 文档的开关
 VUE_APP_DOC_ENABLE = true
 

.env.dev

@@ -13,6 +13,9 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 # 多租户的开关
 VUE_APP_TENANT_ENABLE = true
 
+# 验证码的开关
+VUE_APP_CAPTCHA_ENABLE = true
+
 # 文档的开关
 VUE_APP_DOC_ENABLE = true
 

.env.local

@@ -14,6 +14,9 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 # 多租户的开关
 VUE_APP_TENANT_ENABLE = true
 
+# 验证码的开关
+VUE_APP_CAPTCHA_ENABLE = true
+
 # 文档的开关
 VUE_APP_DOC_ENABLE = true
 

.env.prod

@@ -15,6 +15,9 @@ VUE_APP_APP_NAME ='yudao-admin'
 # 多租户的开关
 VUE_APP_TENANT_ENABLE = true
 
+# 验证码的开关
+VUE_APP_CAPTCHA_ENABLE = true
+
 # 文档的开关
 VUE_APP_DOC_ENABLE = false
 

.env.stage

@@ -15,6 +15,9 @@ PUBLIC_PATH = 'http://static.yudao.iocoder.cn/'
 # 多租户的开关
 VUE_APP_TENANT_ENABLE = true
 
+# 验证码的开关
+VUE_APP_CAPTCHA_ENABLE = true
+
 # 文档的开关
 VUE_APP_DOC_ENABLE = false
 

src/utils/ruoyi.js

@@ -185,6 +185,19 @@ export function getTenantEnable() {
   return process.env.VUE_APP_TENANT_ENABLE || true;
 }
 
+/**
+ * 获得验证码功能是否开启
+ */
+export function getCaptchaEnable() {
+  if (process.env.VUE_APP_CAPTCHA_ENABLE === "true") {
+    return true;
+  }
+  if (process.env.VUE_APP_CAPTCHA_ENABLE === "false") {
+    return false;
+  }
+  return process.env.VUE_APP_CAPTCHA_ENABLE || true;
+}
+
 /**
  * 获得文档是否开启
  */

src/views/login.vue

@@ -87,12 +87,11 @@
         </div>
       </div>
     </div>
-    <Verify
-      ref="verify"
-      :captcha-type="'blockPuzzle'"
-      :img-size="{width:'400px',height:'200px'}"
-      @success="handleLogin"
-    />
+
+    <!-- 图形验证码 -->
+    <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
+            @success="handleLogin" />
+
     <!-- footer -->
     <div class="footer">
       Copyright © 2020-2022 iocoder.cn All Rights Reserved.
@@ -104,7 +103,7 @@
 import {sendSmsCode, socialAuthRedirect} from "@/api/login";
 import {getTenantIdByName} from "@/api/system/tenant";
 import {SystemUserSocialTypeEnum} from "@/utils/constants";
-import {getTenantEnable} from "@/utils/ruoyi";
+import {getCaptchaEnable, getTenantEnable} from "@/utils/ruoyi";
 import {
   getPassword,
   getRememberMe, getTenantName,
@@ -188,16 +187,21 @@ export default {
   created() {
     // 租户开关
     this.tenantEnable = getTenantEnable();
+    // 验证码开关
+    this.captchaEnable = getCaptchaEnable();
     // 重定向地址
     this.redirect = this.$route.query.redirect;
     this.getCookie();
   },
   methods: {
     getCode() {
-      // 只有开启的状态，才加载验证码。默认开启
+      // 情况一，未开启：则直接登录
       if (!this.captchaEnable) {
+        this.handleLogin({})
         return;
       }
+
+      // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
       // 弹出验证码
       this.$refs.verify.show()
     },
@@ -214,7 +218,7 @@ export default {
         tenantName: tenantName ? tenantName : this.loginForm.tenantName,
       };
     },
-    handleLogin(params) {
+    handleLogin(captchaParams) {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
@@ -230,7 +234,7 @@ export default {
             removeRememberMe()
             removeTenantName()
           }
-          this.loginForm.captchaVerification = params.captchaVerification
+          this.loginForm.captchaVerification = captchaParams.captchaVerification
           // 发起登陆
           // console.log("发起登录", this.loginForm);
           this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {

src/views/socialLogin.vue

@@ -32,20 +32,11 @@
                   <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
                 </el-input>
               </el-form-item>
-              <el-form-item prop="code" v-if="captchaEnable">
-                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
-                          @keyup.enter.native="handleLogin">
-                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
-                </el-input>
-                <div class="login-code">
-                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-                </div>
-              </el-form-item>
               <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
               <!-- 下方的登录按钮 -->
               <el-form-item style="width:100%;">
                 <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
-                           @click.native.prevent="handleLogin">
+                           @click.native.prevent="getCode">
                   <span v-if="!loading">登 录</span>
                   <span v-else>登 录 中...</span>
                 </el-button>
@@ -55,6 +46,11 @@
         </div>
       </div>
     </div>
+
+    <!-- 图形验证码 -->
+    <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
+            @success="handleLogin" />
+
     <!-- footer -->
     <div class="footer">
       Copyright © 2020-2022 iocoder.cn All Rights Reserved.
@@ -72,10 +68,15 @@ import {
   setRememberMe,
   setUsername
 } from "@/utils/auth";
-import {getCodeImg} from "@/api/login";
+
+import Verify from '@/components/Verifition/Verify';
+import {getCaptchaEnable} from "@/utils/ruoyi";
 
 export default {
   name: "ThirdLogin",
+  components: {
+    Verify
+  },
   data() {
     return {
       codeUrl: "",
@@ -85,8 +86,7 @@ export default {
         username: "admin",
         password: "admin123",
         rememberMe: false,
-        code: "",
-        uuid: "",
+        captchaVerification: "",
       },
       loginRules: {
         username: [
@@ -114,9 +114,10 @@ export default {
   // },
   created() {
     this.getCookie();
+    // 验证码开关
+    this.captchaEnable = getCaptchaEnable();
     // 重定向地址
     this.redirect = this.$route.query.redirect;
-    this.getCode();
     // 社交登录相关
     this.type = this.$route.query.type;
     this.code = this.$route.query.code;
@@ -133,19 +134,15 @@ export default {
   },
   methods: {
     getCode() {
-      // 只有开启的状态，才加载验证码。默认开启
+      // 情况一，未开启：则直接登录
       if (!this.captchaEnable) {
+        this.handleLogin({})
         return;
       }
-      // 请求远程，获得验证码
-      getCodeImg().then(res => {
-        res = res.data;
-        this.captchaEnable = res.enable;
-        if (this.captchaEnable) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid;
-        }
-      });
+
+      // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+      // 弹出验证码
+      this.$refs.verify.show()
     },
     getCookie() {
       const username = getUsername();
@@ -158,7 +155,7 @@ export default {
         loginType: this.loginForm.loginType,
       };
     },
-    handleLogin() {
+    handleLogin(captchaParams) {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
@@ -177,8 +174,7 @@ export default {
             // 账号密码登录
             username: this.loginForm.username,
             password: this.loginForm.password,
-            code: this.loginForm.code,
-            uuid: this.loginForm.uuid,
+            captchaVerification: captchaParams.captchaVerification
           }).then(() => {
             this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
           }).catch(() => {