优化

src/api/login/index.js

@@ -25,12 +25,9 @@ export async function getLoginUser (data) {
 /**
  * 获取验证码
  */
-export async function getCaptcha () {
-  const res = await request.get('/captcha');
-  if (res.data.code === 0) {
-    return res.data.data;
-  }
-  return Promise.reject(new Error(res.data.message));
+export async function getCaptcha (params) {
+  const res = await request.get('/main/user/captcha', {params , responseType:'blob'});
+    return res;
 }
 
 

src/utils/request.js

@@ -13,6 +13,9 @@ const service = axios.create({
   baseURL: API_BASE_URL,
   transformResponse: [
     function (data) {
+      if (data instanceof Blob) {
+        return data;
+      }
       const json = JSONBIG({
         storeAsString: true
       });

src/views/login/index.vue

@@ -12,23 +12,22 @@
       <el-form-item prop="loginPwd">
         <el-input show-password v-model="form.loginPwd" prefix-icon="el-icon-lock" placeholder="请输入登录密码"  />
       </el-form-item>
-      <!-- <el-form-item prop="code">
+       <el-form-item prop="captcha">
         <div class="login-input-group">
           <el-input
             clearable
-            v-model="form.code"
+            v-model="form.captcha"
             prefix-icon="el-icon-_vercode"
             :placeholder="$t('login.code')"
           />
           <img
             alt=""
-            v-if="captcha"
             :src="captcha"
             class="login-captcha"
             @click="changeCaptcha"
           />
         </div>
-      </el-form-item> -->
+      </el-form-item> 
       <div class="el-form-item">
         <el-checkbox v-model="form.remember">
           {{ $t('login.remember') }}
@@ -87,11 +86,14 @@ export default {
         loginName: localStorage.getItem('accountInfo') ? JSON.parse(localStorage.getItem('accountInfo')).loginName : '',
         loginPwd: localStorage.getItem('accountInfo') ? JSON.parse(localStorage.getItem('accountInfo')).loginPwd : '',
         remember: localStorage.getItem('accountInfo') ? JSON.parse(localStorage.getItem('accountInfo')).remember : false,
+        captcha: '',
+        uuid: ''
       },
       // 验证码base64数据
       captcha: '',
       // 验证码内容, 实际项目去掉
-      text: ''
+      text: '',
+
     };
   },
   computed: {
@@ -113,11 +115,21 @@ export default {
             type: 'string',
             trigger: 'blur'
           }
+        ],
+
+        captcha: [
+        {
+            required: true,
+            message: '验证码不能为空',
+            type: 'string',
+            trigger: 'blur'
+          }
         ]
       };
     }
   },
   created() {
+    this.changeCaptcha()
     if (getToken()) {
       this.goHome();
     } else {
@@ -162,20 +174,34 @@ export default {
     },
     /* 更换图形验证码 */
     changeCaptcha() {
+      this.form.uuid = this.generateUUID()
       // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
-      getCaptcha()
+      getCaptcha({uuid:  this.form.uuid})
         .then((data) => {
-          this.captcha = data.base64;
-          // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
-          this.text = data.text;
-          // 自动回填验证码, 实际项目去掉这个
-          this.form.code = this.text;
+          this.captcha = URL.createObjectURL(data.data);
           this.$refs?.form?.clearValidate();
         })
         .catch((e) => {
           // this.$message.error(e.message);
         });
     },
+ generateUUID() {
+    var d = new Date().getTime(); //Timestamp
+    var d2 = (performance && performance.now && (performance.now()*1000)) || 0; //Time in microseconds since page-load or 0 if unsupported
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random() * 16; //random number between 0 and 16
+        if(d > 0) { //Use timestamp until depleted
+            r = (d + r)%16 | 0;
+            d = Math.floor(d/16);
+        } else { //Use microseconds since page-load if supported
+            r = (d2 + r)%16 | 0;
+            d2 = Math.floor(d2/16);
+        }
+        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    });
+}
+ 
+
 
 
   }