扫码登陆

src/api/login.js

@@ -46,3 +46,34 @@ export function getFirstLogin() {
     method: 'get'
   })
 }
+
+export function getWechatQrCode(data) {
+  return request({
+    url: '/getWechatQrCode',
+    method: 'post',
+    data: data
+  })
+}
+
+export function checkWechatScan(ticket) {
+  return request({
+    url: '/checkWechatScan',
+    method: 'get',
+    params: { ticket }
+  })
+}
+
+//检查是否需要验证码验证
+export function checkIsNeedCheck(username, password, code, uuid) {
+  const data = {
+    username,
+    password,
+    code,
+    uuid
+  }
+  return request({
+    url: '/checkIsNeedCheck',
+    method: 'post',
+    data: data
+  })
+}

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, logout, getInfo,checkIsNeedCheck } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
@@ -41,13 +41,22 @@ const user = {
       const code = userInfo.code
       const uuid = userInfo.uuid
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
-          setToken(res.token)
-          commit('SET_TOKEN', res.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
+        checkIsNeedCheck(username, password, code, uuid).then(resp => {
+          console.log("检查是否需要验证", resp)
+          if (!resp) {
+            // 不需要短信验证，直接登录
+            login(username, password, code, uuid).then(res => {
+              setToken(res.token)
+              commit('SET_TOKEN', res.token)
+              resolve({ needSms: false })
+            }).catch(error => {
+              reject(error)
+            })
+          } else {
+            // 需要短信，交给页面去弹窗
+            resolve({ needSms: true })
+          }
+        }).catch(error => reject(error))
       })
     },
 

src/views/WechatLoginDialog.vue

@@ -0,0 +1,84 @@
+<!--<template>-->
+<!--  <el-dialog title="微信扫码验证" :visible.sync="visible" width="300px">-->
+<!--    <div class="flex flex-col items-center justify-center">-->
+<!--      &lt;!&ndash; 直接用 qrcode-vue 生成二维码 &ndash;&gt;-->
+<!--      <qrcode-vue :value="qrUrl" :size="200" v-if="qrUrl" />-->
+<!--      <p v-if="status==='waiting'">请使用微信扫码确认</p>-->
+<!--      <p v-if="status==='success'">验证成功，正在跳转...</p>-->
+<!--    </div>-->
+<!--  </el-dialog>-->
+<!--</template>-->
+
+<script>
+import { getWechatQrCode, checkWechatScan } from "@/api/login";
+import QrcodeVue from "qrcode.vue";
+
+export default {
+  name: "WechatLoginDialog",
+  components: { QrcodeVue },
+  props: {
+    visible: Boolean,
+    username: String,
+    redirect: String
+  },
+  data() {
+    return {
+      qrUrl: "",     // 微信扫码登录URL（用来生成二维码内容）
+      ticket: "",
+      status: "waiting",
+      timer: null,
+      errorShown: false
+    };
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal && this.username) this.open(this.username);
+    }
+  },
+  methods: {
+    open(username) {
+      getWechatQrCode({ username }).then(res => {
+        this.ticket = res.data.state;
+        const win = window.open(res.data.url); // 新开窗口扫码
+        this.startPolling(win); // 传入窗口对象
+      });
+    },
+    startPolling(win) {
+      this.timer = setInterval(() => {
+        checkWechatScan(this.ticket)
+          .then(res => {
+            if (res.code === 200 && res.data) {
+              this.status = "success";
+              clearInterval(this.timer);
+              console.log("扫码成功，准备 emit 事件", res.data);
+
+              this.$emit("update:visible", false);
+              this.$emit("loginSuccess", res.data);
+
+              if (win && !win.closed) {
+                win.close(); // 扫码完成后自动关闭窗口
+              }
+            }
+          })
+          .catch(err => {
+            clearInterval(this.timer);
+            this.$emit("update:visible", false);
+
+            if (!this.errorShown) {
+              this.errorShown = true;
+              this.$message.error(err.response?.data?.msg );
+            }
+
+            if (win && !win.closed) {
+              win.close(); // 异常也关闭窗口
+            }
+          });
+      }, 800);
+    }
+
+  },
+  beforeDestroy() {
+    if (this.timer) clearInterval(this.timer);
+  }
+};
+</script>

src/views/login.vue

@@ -66,6 +66,16 @@
         </el-form-item>
       </el-form>
     </div>
+
+    <!-- 微信扫码弹框 -->
+    <WechatLoginDialog
+      ref="wechatDialog"
+      :ticket="loginForm.username"
+      :visible.sync="wechatDialogVisible"
+      @loginSuccess="handleWechatLoginSuccess"
+      :redirect="redirect"
+    />
+
     <!--  底部  -->
     <div class="el-login-footer">
       <span>{{companyName}}</span>
@@ -79,9 +89,11 @@ import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from '@/utils/jsencrypt'
 import { getFirstLogin } from "@/api/login";
-
+import WechatLoginDialog from "@/views/WechatLoginDialog";
+import { setToken } from "@/utils/auth";
 export default {
   name: "Login",
+  components: { WechatLoginDialog  },
   data() {
     return {
       codeUrl: "",
@@ -90,6 +102,7 @@ export default {
       icpRecord: process.env.VUE_APP_ICP_RECORD,
       icpUrl: process.env.VUE_APP_ICP_URL,
       cookiePassword: "",
+      wechatDialogVisible: false,
       loginForm: {
         username: "",
         password: "",
@@ -166,7 +179,18 @@ export default {
       };
     },
 
+    // 微信扫码成功回调
+    handleWechatLoginSuccess(token) {
+      this.loading = false
+      console.log("父组件收到 loginSuccess:", token);
+      this.$store.commit("SET_TOKEN", token);
+      setToken(token);
+      // 登录成功后检查是否是首次登录
+      this.checkFirstLogin();
+    },
+
     handleLogin() {
+      console.log("handleLogin")
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
@@ -181,12 +205,24 @@ export default {
           }
           this.$store
             .dispatch("Login", this.loginForm)
-            .then(() => {
-              // 登录成功后检查是否是首次登录
-              this.checkFirstLogin();
-              //this.$router.push({ path: this.redirect || "/" });
+            .then(res => {
+              if (res.needSms) {
+                console.log("打开弹窗")
+                this.wechatDialogVisible = true;
+                // 等 visible 更新后，直接调用弹窗 open()
+                this.$nextTick(() => {
+                  if (this.$refs.wechatDialog) {
+                    this.$refs.wechatDialog.open(this.loginForm.username);
+                  }
+                });
+              } else {
+                // 登录成功后检查是否是首次登录
+                this.checkFirstLogin();
+              }
             })
-            .catch(() => {
+            .catch(res => {
+              console.log("登录失败")
+              console.log(res)
               this.loading = false;
               this.getCode();
             });