app扫码登录

src/http/moudules/login.js

@@ -37,19 +37,10 @@ export const getQRCode = (id) => {
       method: 'get',
   })
 }
-//扫描二维码
-export const scanQRCode = (data) => {
-  return axios({
-      url: '/scanQrCode',
-      method: 'post',
-      data
-  })
-}
 //扫码登录状态
-export const QrCodeStatusQuery = (data) => {
+export const QrCodeStatusQuery = (id) => {
   return axios({
-      url: '/getQrCodeStatus',
-      method: 'post',
-      data
+      url: '/getQrCodeStatus?uuid='+id,
+      method: 'get',
   })
 }

src/views/Login.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="wavy-line">
+
     <div id="content" style="height: 100%;">
       <div id="Login">
+
         <div class="log_on">
           <div class="left_content"></div>
           <div class="right_content">
-            <img v-if="toggleQrCode" class="img1" src="../assets//image/log_code.png" alt=""
-              @click="toggleQrCode = !toggleQrCode">
-            <img v-else class="img1" src="../assets//image/QR_code.png" alt="" @click="toggleQrCode = !toggleQrCode">
+            <img v-if="toggleQrCode" class="img1" src="../assets//image/log_code.png" alt="" @click="switchLogin">
+            <img v-else class="img1" src="../assets//image/QR_code.png" alt="" @click="switchCode">
             <div style="padding:15% 20% ">
               <img class="img2" src="../assets//image/logo_img.png" alt="">
               <div v-show="toggleQrCode" style="text-align: center;">
-                <div class="img3" id="qrcode" ref="qrcode"></div>
-                <el-button icon="el-icon-refresh-right" size="small" style="margin-top: 10px;" @click="refresh">刷新二维码</el-button>
+                <div class="img3" v-loading="loadingCode"  id="qrcode" ref="qrcode">
+                  <transition name="el-fade-in">
+                    <el-result v-if="tipVisibility" class="scanSuccess" icon="success" title="扫码成功"></el-result>
+                  </transition>
+                </div>
+                <el-button icon="el-icon-refresh-right" size="small" style="margin-top: 10px;"
+                  @click="refresh">刷新二维码</el-button>
                 <p class="code_word">打开<b>客户端APP</b>扫描二维码</p>
               </div>
               <el-form v-show="!toggleQrCode" size="medium" :model="loginForm" :rules="fieldRules" ref="loginForm"
@@ -79,6 +85,7 @@ export default {
   },
   data() {
     return {
+      loadingCode:false,
       qrcode: null,
       rememberPassword: false,
       loading: false,
@@ -102,10 +109,11 @@ export default {
       checked: true,
       toggleQrCode: false,
       uuid: '',
+      polling: null,
+      tipVisibility: false,
     }
   },
   created() {
-    this.generateQrCode();
     // 记住密码
     if (Cookies.get('accountInfo')) {
       const accountInfo = JSON.parse(Cookies.get('accountInfo'));
@@ -116,36 +124,6 @@ export default {
     this.enterEvent()//初始化回车事件
   },
   methods: {
-    refresh(){
-      this.generateQrCode();
-    },
-    generateQrCode() {
-      let randnum = new Date().getTime();
-      let uuid = md5(randnum)
-      let url = process.env.BASE_URL + '/scanQrCode?uuid=' + uuid;
-      this.$nextTick(() => {
-        this.creatQrCode(url)
-        this.$api.login.getQRCode(uuid).then((res) => {
-          this.uuid=res.data.uuid;
-        });
-      })
-    },
-    //生成二维码
-    creatQrCode(text) {
-      if (this.qrcode) {
-        this.qrcode.clear();
-        this.qrcode.makeCode(text);
-      } else {
-        this.qrcode = new QRCode("qrcode", {
-          text: text,
-          width: 200,
-          height: 200,
-          colorDark: "#000000",
-          colorLight: "#ffffff",
-          correctLevel: QRCode.CorrectLevel.H
-        });
-      }
-    },
     enterEvent() {
       if (this.$route.name === '登录') {
         document.onkeydown = (e) => {
@@ -201,30 +179,8 @@ export default {
             Cookies.remove('accountInfo')
           }
           Cookies.set('token', res.data) // 放置token到Cookie
-          Cookies.set('user', userInfo.account) // 放置token到Cookie
           this.getDictItems()
-          this.$api.user.getLoginUser().then((response) => {
-            if (response.code == 200) {
-              //头像地址拼接
-              if (response.data.headSculpture != '' && response.data.headSculpture != null && response.data.headSculpture != undefined) {
-                response.data.headSculpture = process.env.BASE_URL + response.data.headSculpture
-              }
-              localStorage.setItem('user_data', JSON.stringify(response.data))
-
-              this.$store.commit("SET_USER", response.data);
-              localStorage.setItem('user_data', JSON.stringify(response.data))
-            }
-            else {
-              this.$message.error(response.msg)
-            }
-          })
-          this.$api.role.findAll().then((res) => {
-            localStorage.setItem('find_all', JSON.stringify(res.data))
-          })
-          localStorage.setItem('routerId', '420')
-          sessionStorage.setItem('user', userInfo.account) /
-            this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
-          this.$router.push('/') // 登录成功，跳转到主页
+          this.getUser();
         }
         this.loading = false
       }).catch((res) => {
@@ -254,9 +210,25 @@ export default {
     getUser() {
       this.$api.user.getLoginUser().then((response) => {
         if (response.code == 200) {
-          this.$store.commit("SET_USER", response.data)
-          localStorage.setItem('user_data', JSON.stringify(response.data)) // 保存用户到本地会话
+          //头像地址拼接
+          if (response.data.headSculpture != '' && response.data.headSculpture != null && response.data.headSculpture != undefined) {
+            response.data.headSculpture = process.env.BASE_URL + response.data.headSculpture
+          }
+          localStorage.setItem('user_data', JSON.stringify(response.data))
+          this.$store.commit("SET_USER", response.data);
+          sessionStorage.setItem('user', response.data.id)
+          Cookies.set('user', response.data.id)
+          localStorage.setItem('routerId', '420');
+          this.$store.commit('menuRouteLoaded', false);
+          this.$router.push('/');
+          this.loadingCode=false;
         }
+        else {
+          this.$message.error(response.msg)
+        }
+      })
+      this.$api.role.findAll().then((res) => {
+        localStorage.setItem('find_all', JSON.stringify(res.data))
       })
     },
     refreshCaptcha() {
@@ -271,7 +243,81 @@ export default {
     // 切换主题
     onThemeChange: function (themeColor) {
       this.$store.commit('setThemeColor', themeColor)
-    }
+    },
+    switchLogin() {
+      this.toggleQrCode = !this.toggleQrCode;
+      this.stopPolling()
+    },
+    switchCode() {
+      this.toggleQrCode = !this.toggleQrCode;
+      this.generateQrCode();//获取二维码
+    },
+    generateQrCode() {
+      let randnum = new Date().getTime();
+      let uuid = md5(randnum)
+      let url = process.env.BASE_URL + '/scanQrCode?uuid=' + uuid;
+      console.log(url)
+      this.$nextTick(() => {
+        this.creatQrCode(url)
+        this.$api.login.getQRCode(uuid).then((res) => {
+          this.uuid = res.data.uuid;
+          this.startPolling();
+        });
+      })
+    },
+    checkScanStatus() {
+      this.$api.login.QrCodeStatusQuery(this.uuid).then((res) => {
+        if (res.data.statusCode == 20000) {
+          this.tipVisibility = true;
+          this.loadingCode=true;
+          setTimeout(()=>{
+            this.CodeLoginSuccess(res.data.token)
+          },1500)
+        }
+      });
+    },
+    startPolling() {
+      if (this.polling) {
+        this.stopPolling();
+      }
+      this.polling = setInterval(this.checkScanStatus, 1000);
+    },
+    stopPolling() {
+      clearInterval(this.polling);
+      this.polling = null;
+    },
+    CodeLoginSuccess(token) {
+      Cookies.set('token', token) // 放置token到Cookie
+      this.getDictItems()//获取字典
+      this.getUser();
+    },
+
+    refresh() {
+      this.generateQrCode();
+    },
+    //生成二维码
+    creatQrCode(text) {
+      if (this.qrcode) {
+        this.qrcode.clear();
+        this.qrcode.makeCode(text);
+      } else {
+        this.qrcode = new QRCode("qrcode", {
+          text: text,
+          width: 200,
+          height: 200,
+          colorDark: "#000000",
+          colorLight: "#ffffff",
+          correctLevel: QRCode.CorrectLevel.H
+        });
+      }
+    },
+
+
+  },
+
+  beforeDestroy() {
+    // 组件销毁前确保轮询被清除
+    this.stopPolling();
   },
   mounted() {
     this.refreshCaptcha()
@@ -386,6 +432,7 @@ export default {
         margin-left: auto;
         margin-right: auto;
         border: 1px solid #EAEDF1;
+        position: relative;
       }
 
       .el-form-item {
@@ -415,4 +462,12 @@ export default {
     }
   }
 }
+
+.scanSuccess {
+  position: absolute;
+  background: #ffffffef;
+  font-weight: bold;
+  width: 200px;
+  height: 200px;
+}
 </style>