验证码功能

src/api/userlogin.js

 import request from '@/utils/request'
 //登录、修改密码
-//const webUrl  = 'http://localhost:168/fyglAPP/';
- const webUrl  = 'http://192.168.3.110:8999/diseaseControlManage/';
+const webUrl  = 'http://localhost:168/fyglAPP/';
+//const webUrl  = 'http://192.168.3.110:8999/diseaseControlManage/';
 // const webUrl  = 'http://195.1.3.38:8999/diseaseControlManage/';
 export function login(loginID, loginPas) {
   return request({
@@ -18,12 +18,17 @@ export function login(loginID, loginPas) {
   })
 }
 //图形码验证
-export function getCode(yzm){
-  var t =  (new Date).getTime(); //每次点击重新取个随机数
+export function getCode(yzm,t){
   return request({
-    url: 'http://192.168.3.110:8999/diseaseControlManage/api/login/verify?t='+t+'&code='+yzm,
+    url: webUrl+'api/login/verify?t='+t+'&code='+yzm,
     method:'post',
-    async:false, //同步
+    headers:{
+      'Content-Type':'application/json',
+      "Accept": "*/*"
+    },
+    data:JSON.stringify({
+
+    })
   })
 }
 
@@ -44,3 +49,9 @@ export function updatePassword(uid,pwdold,pwdnew) {
     })
   })
 }
+
+//更换验证码
+export function changeCode(data) {
+  let imgUrl = webUrl+`api/login/captcha?t=${data}`;
+  return imgUrl
+}

src/components/UserLogin.vue

@@ -18,7 +18,7 @@
           maxlength="8"
           style="width: 130px;display: inline-block;margin: 0px 12px 0px 0px;"
         ></el-input>
-        <img src="" ref="code" @click="changeCode" height="40">
+        <img :src="imgUrl"  @click="changeImg()" height="40">
       </div>
 
       <div class="PassAbout">
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import { getCode,login} from '@/api/userlogin.js'
+  import { getCode,login,changeCode} from '@/api/userlogin.js'
 
   export default {
     data() {
@@ -48,7 +48,10 @@
         checked: false,
         captcha_key: "",
         captcha_code: "",
-        value2: ''
+        value2: '',
+        t:(new Date).getTime(),
+        imgUrl:'',
+        imgData:''
       }
     },
     methods: {
@@ -68,72 +71,70 @@
         };
       
         let _this = this
-     
-       getCode(this.captcha_code).then( res =>{
-          console.log(res)
+
+       getCode(this.captcha_code,this.imgData).then(res =>{
+         if(res==undefined){
+           this.$message.error('验证码错误');
+           return false
+         }
+         // 用户登录
+         login(this.loginID, this.$md5(this.loginPas)).then(res => {
+           console.log(res)
+           //login(this.loginID,this.loginPas).then( res=>{
+
+           if (res.code == 1) {
+             sessionStorage.setItem('token', res.data.token);
+             sessionStorage.setItem('userinfo', JSON.stringify(res.data.userInfo));
+             sessionStorage.setItem('ywsj', res.data.userInfo.jzrq);
+
+             sessionStorage.setItem('porgcode', res.data.userInfo.porgcode);
+             sessionStorage.setItem('organizcode', res.data.userInfo.organizcode);
+             sessionStorage.setItem('organizcodeName', res.data.userInfo.jgjc);
+
+             if ('hcms.shizhang' === res.data.userInfo.roles[0]) {//市角色
+               sessionStorage.setItem('userRole', "city");
+             } else if ('hcms.App_Qu' === res.data.userInfo.roles[0]) {//区角色
+               sessionStorage.setItem('userRole', "area");
+             } else if ('hcms.APP_SQYZ' === res.data.userInfo.roles[0]) {//社区角色
+               sessionStorage.setItem('userRole', "hospital");
+             }
+
+             this.$router.push({path: './Index'});
+           } else {
+             _this.$message.error(res.msg);
+           }
+           if (res.msg == "操作成功") {
+             //单选框被选中时,将 local 存储
+             if (this.checked) {
+               //  local 存储 用户登录返回的所有数据(不包含密码)
+               //  local 存储 用户密码
+               sessionStorage.setItem('userID', this.loginID);
+               sessionStorage.setItem('userPas', this.loginPas);
+               sessionStorage.setItem('ifselect', true);
+             }
+             // 登陆成功, 路由跳转
+             this.$router.push({path: './Index'});
+           } else {
+             let errormsg = res.msg
+             _this.$message.error(`${errormsg}`);
+           }
+         }).catch(err => {
            console.log("登录报错！");
-       }).catch(err => {
-          // console.log("登录报错！");
          })
-        // 用户登录
-        login(this.loginID, this.$md5(this.loginPas)).then(res => {
-          //login(this.loginID,this.loginPas).then( res=>{
-        
-          if (res.code == 1) {
-            sessionStorage.setItem('token', res.data.token);
-            sessionStorage.setItem('userinfo', JSON.stringify(res.data.userInfo));
-            sessionStorage.setItem('ywsj', res.data.userInfo.jzrq);
-
-            sessionStorage.setItem('porgcode', res.data.userInfo.porgcode);
-            sessionStorage.setItem('organizcode', res.data.userInfo.organizcode);
-            sessionStorage.setItem('organizcodeName', res.data.userInfo.jgjc);
-
-            if ('hcms.shizhang' === res.data.userInfo.roles[0]) {//市角色
-              sessionStorage.setItem('userRole', "city");
-            } else if ('hcms.App_Qu' === res.data.userInfo.roles[0]) {//区角色
-              sessionStorage.setItem('userRole', "area");
-            } else if ('hcms.APP_SQYZ' === res.data.userInfo.roles[0]) {//社区角色
-              sessionStorage.setItem('userRole', "hospital");
-            }
-
-            this.$router.push({path: './Index'});
-          } else {
-            _this.$message.error(res.msg);
-          }
-          if (res.msg == "操作成功") {
-            //单选框被选中时,将 local 存储
-            if (this.checked) {
-              //  local 存储 用户登录返回的所有数据(不包含密码)
-              //  local 存储 用户密码
-              sessionStorage.setItem('userID', this.loginID);
-              sessionStorage.setItem('userPas', this.loginPas);
-              sessionStorage.setItem('ifselect', true);
-            }
-            // 登陆成功, 路由跳转
-            this.$router.push({path: './Index'});
-          } else {
-            let errormsg = res.msg
-            _this.$message.error(`${errormsg}`);
-          }
-        }).catch(err => {
+         return false
+       }).catch(err => {
           console.log("登录报错！");
-        })
-      },
-       
-
-      //更换验证码
-      changeCode() {
-        this.$refs.code.setAttribute(
-          "src", 'http://192.168.3.110:8999/diseaseControlManage/api/login/captcha' + '?t=' + (new Date).getTime()
-        );
+         })
 
+      },
+      changeImg(){
+        this.imgData = (new Date).getTime();
+        this.imgUrl = changeCode(this.imgData);
       }
-
     },
     mounted() {
-       this.$refs.code.setAttribute(
-        "src", 'http://192.168.3.110:8999/diseaseControlManage/api/login/captcha'
-      );
+      this.imgData = (new Date).getTime()
+      this.imgUrl = changeCode(this.imgData);
 
       if (sessionStorage.getItem('userID') && sessionStorage.getItem('userPas')) {
         // 若 local 存在即自动跳转

src/utils/request.js

@@ -61,10 +61,10 @@ service.interceptors.response.use(
           }
         }
       } else {
-        Notification.error({
-          title: '接口请求失败',
-          duration: 5000
-        })
+        // Notification.error({
+        //   title: '接口请求失败',
+        //   duration: 5000
+        // })
       }