:heavy_plus_sign: 增加验证码校验

src/api/user.js

@@ -1,21 +1,23 @@
 import request from '@/router/axios';
 import { baseUrl } from '@/config/env';
 
-export const loginByUsername = (tenantId, username, password, type) => request({
+export const loginByUsername = (tenantId, username, password, type, key, code) => request({
   url: '/api/blade-auth/oauth/token',
   method: 'post',
   headers: {
-    'Tenant-Id': tenantId
+    'Tenant-Id': tenantId,
+    'Captcha-Key': key,
+    'Captcha-Code': code,
   },
   params: {
     tenantId,
     username,
     password,
-    grant_type: "password",
+    grant_type: "captcha",
     scope: "all",
     type
   }
-})
+});
 
 export const refreshToken = (refresh_token, tenantId) => request({
   url: '/api/blade-auth/oauth/token',
@@ -29,13 +31,18 @@ export const refreshToken = (refresh_token, tenantId) => request({
     grant_type: "refresh_token",
     scope: "all",
   }
-})
+});
 
 export const getButtons = () => request({
   url: '/api/blade-system/menu/buttons',
   method: 'get'
 });
 
+export const getCaptcha = () => request({
+  url: '/api/blade-auth/oauth/captcha',
+  method: 'get'
+});
+
 export const getUserInfo = () => request({
   url: baseUrl + '/user/getUserInfo',
   method: 'get'

src/page/login/userlogin.vue

@@ -34,92 +34,132 @@
         <i slot="prefix" class="icon-mima"/>
       </el-input>
     </el-form-item>
+    <el-form-item prop="code">
+      <el-row :span="24">
+        <el-col :span="16">
+          <el-input size="small"
+                    @keyup.enter.native="handleLogin"
+                    v-model="loginForm.code"
+                    auto-complete="off"
+                    :placeholder="$t('login.code')">
+            <i slot="prefix" class="icon-yanzhengma"/>
+          </el-input>
+        </el-col>
+        <el-col :span="8">
+          <div class="login-code">
+            <img :src="loginForm.image" class="login-code-img" @click="refreshCode"
+            />
+          </div>
+        </el-col>
+      </el-row>
+    </el-form-item>
     <el-form-item>
       <el-button type="primary"
                  size="small"
                  @click.native.prevent="handleLogin"
-                 class="login-submit">{{$t('login.submit')}}</el-button>
+                 class="login-submit">{{$t('login.submit')}}
+      </el-button>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import website from '@/config/website';
-import {info} from "@/api/system/tenant";
+  import {mapGetters} from "vuex";
+  import website from '@/config/website';
+  import {info} from "@/api/system/tenant";
+  import {getCaptcha} from "@/api/user";
 
-export default {
-  name: "userlogin",
-  data() {
-    return {
-      tenantMode: website.tenantMode,
-      loginForm: {
-        tenantId: "000000",
-        username: "admin",
-        password: "admin",
-        type: "account"
-      },
-      loginRules: {
-        tenantId: [
-          { required: false, message: "请输入租户ID", trigger: "blur" }
-        ],
-        username: [
-          { required: true, message: "请输入用户名", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "请输入密码", trigger: "blur" },
-          { min: 1, message: "密码长度最少为6位", trigger: "blur" }
-        ]
-      },
-      passwordType: "password"
-    };
-  },
-  created() {
-    this.getTenant();
-  },
-  mounted() {},
-  computed: {
-    ...mapGetters(["tagWel"])
-  },
-  props: [],
-  methods: {
-    showPassword() {
-      this.passwordType === ""
-        ? (this.passwordType = "password")
-        : (this.passwordType = "");
+  export default {
+    name: "userlogin",
+    data() {
+      return {
+        tenantMode: website.tenantMode,
+        loginForm: {
+          //租户ID
+          tenantId: "000000",
+          //用户名
+          username: "admin",
+          //密码
+          password: "admin",
+          //账户类型
+          type: "account",
+          //验证码的值
+          code: "",
+          //验证码的索引
+          key: "",
+          //预加载白色背景
+          image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+        },
+        loginRules: {
+          tenantId: [
+            {required: false, message: "请输入租户ID", trigger: "blur"}
+          ],
+          username: [
+            {required: true, message: "请输入用户名", trigger: "blur"}
+          ],
+          password: [
+            {required: true, message: "请输入密码", trigger: "blur"},
+            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
+          ]
+        },
+        passwordType: "password"
+      };
+    },
+    created() {
+      this.getTenant();
+      this.refreshCode();
     },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          const loading = this.$loading({
-            lock: true,
-            text: '登录中,请稍后。。。',
-            spinner: "el-icon-loading"
-          });
-          this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
-            this.$router.push({ path: this.tagWel.value });
-            loading.close();
-          }).catch(() => {
-            loading.close()
-          });
-        }
-      });
+    mounted() {
     },
-    getTenant() {
-      let domain = window.location.href.replace("/#/login", "");
-      // 临时指定域名，方便测试
-      //domain = "https://bladex.vip";
-      info(domain).then(res => {
-        const data = res.data;
-        if (data.success && data.data.tenantId) {
-          this.tenantMode = false;
-          this.loginForm.tenantId = data.data.tenantId;
-          this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
-        }
-      })
+    computed: {
+      ...mapGetters(["tagWel"])
+    },
+    props: [],
+    methods: {
+      refreshCode() {
+        getCaptcha().then(res => {
+          const data = res.data;
+          this.loginForm.key = data.key;
+          this.loginForm.image = data.image;
+        })
+      },
+      showPassword() {
+        this.passwordType === ""
+          ? (this.passwordType = "password")
+          : (this.passwordType = "");
+      },
+      handleLogin() {
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
+            const loading = this.$loading({
+              lock: true,
+              text: '登录中,请稍后。。。',
+              spinner: "el-icon-loading"
+            });
+            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
+              this.$router.push({path: this.tagWel.value});
+              loading.close();
+            }).catch(() => {
+              loading.close()
+            });
+          }
+        });
+      },
+      getTenant() {
+        let domain = window.location.href.replace("/#/login", "");
+        // 临时指定域名，方便测试
+        //domain = "https://bladex.vip";
+        info(domain).then(res => {
+          const data = res.data;
+          if (data.success && data.data.tenantId) {
+            this.tenantMode = false;
+            this.loginForm.tenantId = data.data.tenantId;
+            this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
+          }
+        })
+      }
     }
-  }
-};
+  };
 </script>
 
 <style>

src/store/modules/user.js

@@ -47,7 +47,7 @@ const user = {
     //根据用户名登录
     LoginByUsername({commit}, userInfo) {
       return new Promise((resolve, reject) => {
-        loginByUsername(userInfo.tenantId, userInfo.username, userInfo.password, userInfo.type).then(res => {
+        loginByUsername(userInfo.tenantId, userInfo.username, userInfo.password, userInfo.type, userInfo.key, userInfo.code).then(res => {
           const data = res.data;
           if (data.error_description) {
             Message({

src/styles/login.scss

@@ -180,4 +180,5 @@
   line-height: 38px;
   text-indent: 5px;
   text-align: center;
+  cursor:pointer!important;
 }