登录页面新增验证

src/api/user.js

@@ -6,10 +6,12 @@ import axios from '@/libs/api.request'
  * @param password
  * @returns {never}
  */
-export const login = ({ username, password }) => {
+export const login = ({ username, password, captcha, captcha_token }) => {
   const data = {
     username,
-    password
+    password,
+    captcha,
+    captcha_token
   }
   return axios.request({
     url: 'Login/index',
@@ -18,6 +20,14 @@ export const login = ({ username, password }) => {
   })
 }
 
+export const captcha = (params) => {
+  return axios.request({
+    url: 'Login/captcha',
+    method: 'get',
+    params: params
+  })
+}
+
 export const getUsers = (params) => {
   return axios.request({
     url: 'User/getUsers',

src/libs/api.request.js

@@ -33,6 +33,7 @@ class HttpRequest {
         return { data, status }
       }
     }, error => {
+      iView.Message.error(error.response.data.msg)
       return Promise.reject(error)
     })
   }

src/store/module/user.js

@@ -23,10 +23,10 @@ export default {
   },
   actions: {
     // 登录
-    handleLogin ({ commit }, { username, password }) {
+    handleLogin ({ commit }, { username, password, captcha, captcha_token }) {
       username = username.trim()
       return new Promise((resolve, reject) => {
-        login({ username, password }).then(res => {
+        login({ username, password, captcha, captcha_token }).then(res => {
           sessionStorage.setItem('dynamicRouter', JSON.stringify(res.data.data.menu))
           commit('setUserInfo', res.data.data)
           commit('setToken', res.data.data.apiAuth)

src/view/login/login.vue

@@ -24,6 +24,16 @@
                 </span>
               </Input>
             </FormItem>
+            <FormItem prop="captcha" v-if="need_captcha">
+              <div style="display: flex;align-items: center;">
+                <Input v-model="form.captcha" placeholder="请输入验证码">
+                  <span slot="prepend">
+                    验证码
+                  </span>
+                </Input>
+                <img :src="captchaimg" style="width: 120px; height: 32px; vertical-align: middle;margin-left: 10px;" @click="refreshCaptcha" />
+              </div>
+            </FormItem>
             <FormItem class="margin-bottom-15">
               <Button type="primary" long :loading="loading" @click="handleSubmit">登录</Button>
             </FormItem>
@@ -38,16 +48,19 @@
 
 <script>
 import { mapActions } from 'vuex'
-
+import { captcha } from '@/api/user'
 import { filterAsyncRouter } from '@/libs/router-utils'
 
 export default {
   data () {
     return {
-
+      need_captcha:null,
+      captchaimg:'',
+      captchatoken:'',
       form: {
         username: '',
-        password: ''
+        password: '',
+        captcha:''
       },
       rules: {
         username: [
@@ -55,6 +68,9 @@ export default {
         ],
         password: [
           { required: true, message: '密码不能为空', trigger: 'blur' }
+        ],
+        captcha: [
+          { required: true, message: '验证码不能为空', trigger: 'blur' }
         ]
       },
       loading: false
@@ -107,21 +123,40 @@ export default {
       let vm = this
       let username = vm.form.username
       let password = vm.form.password
+      let captcha = vm.form.captcha
+      let captcha_token = vm.captchatoken
       vm.$refs.loginForm.validate((valid) => {
         if (valid) {
           vm.loading = true
-          vm.handleLogin({ username, password }).then(() => {
+          vm.handleLogin({ username, password, captcha, captcha_token }).then((res) => {
             sessionStorage.setItem('ApiAdmin_AppInfo', '管理员')
             vm.$router.push({
               name: 'home'
             })
             vm.loading = false
-          }).catch(() => {
+          }).catch((error) => {
+            console.log(error.response.data.data.need_captcha);
+            vm.need_captcha = error.response.data.data.need_captcha
+            if(vm.need_captcha==true){
+              vm.Logincaptcha()
+            }
             vm.loading = false
           })
         }
       })
     },
+    Logincaptcha(){
+      let vm = this
+      let username = vm.form.username
+      let password = vm.form.password
+      captcha({ username, password }).then(response => {
+        vm.captchaimg = response.data.data.img
+        vm.captchatoken = response.data.data.token
+      })
+    },
+    refreshCaptcha() {
+      this.Logincaptcha()
+    },
     qqLogin () {
       getQQCode().then(response => {
         window.location.href = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' +