前端实现 PC 网站微信扫码授权登录

3.2 三种登录场景

场景 1: 手机号 + 验证码登录

1. 用户输入手机号
2. 点击发送验证码（60s 倒计时）
3. 输入验证码并登录
4. 后端返回 code=506 → 需要微信授权绑定
5. 跳转到 /weChat 页面扫码绑定

场景 2: 微信直接扫码登录（已绑定）

1. 登录页右侧展示微信二维码
2. 用户扫码授权
3. 回调到 /callback 页面，state=wx_bind
4. code=200 → 登录成功，跳转首页
5. code=405 → 需要绑定手机号，跳转 /mobilePhone

场景 3: 微信二次授权绑定（未绑定）

1. 从手机号登录后需要绑定（code=506）
2. 跳转到 /weChat 页面
3. 扫码授权，state=wechat_login
4. 回调到 /callback 页面
5. 调用绑定接口，登录成功

四、核心代码实现

4.1 登录页面实现 (Login/index.vue)

4.1.1 微信二维码初始化

// 微信登录实例
let wxLoginInstance = null;

// 初始化微信授权登录
const initWechatLogin = () => {
  try {
    createWxLogin();
    console.log("微信授权登录初始化成功");
  } catch (error) {
    console.error("微信授权登录初始化失败:", error);
    ElMessage.error("微信授权登录初始化失败");
  }
};

// 创建微信登录二维码
const createWxLogin = () => {
  try {
    // 自定义 CSS 样式，隐藏多余元素
    const customCss = `
      .impowerBox {display:block!important;visibility:visible!important;...}
      .impowerBox .qrcode {display:block!important;...}
      .impowerBox .title {display:none!important}
      .info {display:none!important}
    `;
    const href = 'data:text/css;base64,' + btoa(customCss);
    const appid = "xxxxxxx";
    // 公网回调地址
    const redirectUri = encodeURIComponent("https://xxxxx.com/callback");
    const state = "wx_bind"; // 标识为首次绑定场景

    // 使用微信官方 WxLogin 对象
    wxLoginInstance = new window.WxLogin({
      self_redirect: false,
      id: "wechat-login-qr",
      appid: appid,
      scope: "snsapi_login",
      redirect_uri: redirectUri,
      state: state,
      href: href // 自定义样式
    });
    console.log("微信二维码已生成，等待用户扫码...");
  } catch (error) {
    console.error("创建微信登录二维码失败:", error);
    ElMessage.error("创建微信登录二维码失败");
  }
};

// 页面挂载时初始化
onMounted(() => {
  setTimeout(() => {
    initWechatLogin();
  }, 100);
});

// 页面卸载时清理
onUnmounted(() => {
  if (wxLoginInstance) {
    wxLoginInstance = null;
  }
  const container = document.getElementById('wechat-login-qr');
  if (container) {
    container.innerHTML = '';
  }
});

4.1.2 手机号登录逻辑

const account = ref("");
const verifyCode = ref("");
const countdown = ref(0);

// 手机号格式验证
const validatePhone = (phone) => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  return phoneRegex.test(phone);
};

// 发送验证码
const sendCode = async () => {
  if (countdown.value > 0) return;
  if (!account.value) {
    ElMessage.warning("请输入手机号");
    return;
  }
  if (!validatePhone(account.value)) {
    ElMessage.warning("请输入正确的 11 位手机号");
    return;
  }
  // 启动倒计时
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
  // 调用发送验证码接口
  const { code, msg } = await sendCodeAPI(account.value);
  if (code !== 200) {
    ElMessage.error(msg);
  } else {
    if (msg) {
      verifyCode.value = msg; // 开发环境自动填入
      ElMessage.success("验证码已自动填入");
    }
  }
};

// 登录处理
const handleLogin = async () => {
  // 表单验证
  if (!account.value || !validatePhone(account.value)) {
    ElMessage.warning("请输入正确的手机号");
    return;
  }
  if (!verifyCode.value) {
    ElMessage.warning("请输入验证码");
    return;
  }
  // 调用登录接口
  const { code, msg, data } = await loginAPI(account.value, verifyCode.value);
  // 检查是否需要微信授权绑定
  if (code === 506) {
    loginStore.setPhone(account.value); // 存储手机号
    ElMessage.info("需要进行微信授权绑定");
    router.push("/weChat");
    return;
  }
  if (code !== 200) {
    ElMessage.error(msg);
    return;
  }
  // 登录成功，存储 token 和用户信息
  loginStore.setToken(data.token);
  loginStore.setUserInfo(data.information);
  chatStore.clearChatData(); // 重置聊天状态
  ElMessage.success("登录成功");
  router.replace("/home");
};

4.2 微信授权绑定页面 (weChat/index.vue)

// 微信登录实例
let wxLoginInstance = null;

// 创建微信绑定二维码
const createWxBind = () => {
  try {
    const container = document.getElementById('wechat-bind-qr');
    if (container) {
      container.innerHTML = '';
    }
    // 自定义样式
    const customCss = `...`;
    const href = 'data:text/css;base64,' + btoa(customCss);
    const appid = "xxxx";
    const redirectUri = encodeURIComponent("https://xxx/callback");
    const state = "wechat_login"; // 标识为二次授权场景

    wxLoginInstance = new window.WxLogin({
      self_redirect: false,
      id: "wechat-bind-qr",
      appid: appid,
      scope: "snsapi_login",
      redirect_uri: redirectUri,
      state: state, // 与登录页的 state 不同
      href: href
    });
    console.log("微信绑定二维码已生成，等待用户扫码...");
  } catch (error) {
    console.error("创建微信绑定二维码失败:", error);
  }
};

// 返回登录
const backToLogin = (e) => {
  e.preventDefault();
  e.stopPropagation();
  router.push("/login");
};

4.3 回调页面处理 (callback/index.vue)

这是整个流程中最核心的部分，负责处理微信授权回调。

const loading = ref(true);
const statusText = ref("正在处理微信授权...");

onMounted(async () => {
  try {
    // 获取 URL 参数
    const code = route.query.code; // 微信授权码
    const state = route.query.state; // 场景标识
    console.log("微信回调参数:", { code, state });

    if (!code) {
      throw new Error("未获取到授权码");
    }

    // 存储 code 到 pinia
    loginStore.setWechatLoginCode(code);

    // ========== 场景 1: 从登录页直接扫码 (wx_bind) ==========
    if (state === 'wx_bind') {
      statusText.value = "正在检查登录状态...";
      // 调用后端接口检查微信登录状态
      const { data, code: resultCode, msg } = await checkWechatLoginStatusAPI(code, state);

      // 情况 1: 需要绑定手机号 (新用户)
      if (resultCode === 405) {
        statusText.value = "需要绑定手机号，正在跳转...";
        loading.value = false;
        ElMessage.info("请先绑定手机号");
        setTimeout(() => {
          router.replace("/mobilePhone");
        }, 1000);
        return;
      }
      // 情况 2: 已绑定，直接登录成功
      else {
        loginStore.setToken(data.token);
        loginStore.setUserInfo(data.information);
        chatStore.clearChatData();
        statusText.value = "微信绑定处理完成";
        loading.value = false;
        ElMessage.success("微信绑定成功");
        setTimeout(() => {
          router.replace("/home");
        }, 1000);
        return;
      }
    }

    // ========== 场景 2: 从 weChat 页面二次授权 (wechat_login) ==========
    if (state === 'wechat_login') {
      statusText.value = "正在进行微信二次授权...";
      // 从 pinia 中获取 phone（之前手机号登录时存储的）
      const phone = loginStore.phone;
      if (!phone) {
        throw new Error("未找到手机号信息，请重新登录");
      }
      // 调用微信绑定接口
      const result = await bindWechatAPI(code, phone);
      if (result.code === 200) {
        loginStore.setToken(result.data.token);
        loginStore.setUserInfo(result.data.information);
        chatStore.clearChatData();
        statusText.value = "微信授权成功，正在跳转...";
        loading.value = false;
        ElMessage.success("微信授权成功");
        setTimeout(() => {
          router.replace("/home");
        }, 1000);
        return;
      } else {
        throw new Error(result.msg || "微信授权失败");
      }
    }
  } catch (error) {
    console.error("微信授权处理失败:", error);
    statusText.value = "授权失败";
    loading.value = false;
    ElMessage.error("授权处理失败，请重试");
    setTimeout(() => {
      router.replace("/login");
    }, 2000);
  }
});

4.4 API 接口封装 (apis/user.js)

import request from "../utils/request";

/**
 * 发送验证码接口
 */
export const sendCodeAPI = (phone) => {
  return request({
    url: `/client/code/send-sms?phone=${phone}`,
    method: "get",
  });
};

/**
 * 登录接口
 * @param {string} phoneNumber - 手机号
 * @param {string} code - 验证码
 * @param {number} registerType - 注册类型，0 表示 PC 端
 */
export const loginAPI = (phoneNumber, code, registerType = 0) => {
  return request({
    url: `/client/customer/login-by-code`,
    method: "post",
    data: {
      phoneNumber,
      code,
      registerType,
    },
  });
};

/**
 * 检查微信登录状态
 * @param {string} code - 微信授权码
 * @param {string} state - 场景标识
 */
export const checkWechatLoginStatusAPI = (code, state) => {
  return request({
    url: `/client/customer/check-is-success?code=${code}&state=${state}`,
    method: "get",
  });
};

/**
 * 绑定微信（二次授权）
 * @param {string} code - 微信授权码
 * @param {string} phone - 手机号
 */
export const bindWechatAPI = (code, phone) => {
  return request({
    url: `/client/customer/check-wechat?code=${code}&phone=${phone}`,
    method: "GET",
  });
};

/**
 * 绑定手机号
 * @param {string} phoneNumber - 手机号
 * @param {string} phoneCode - 手机验证码
 * @param {string} code - 微信登录 code
 */
export const bindPhoneAPI = (phoneNumber, phoneCode, code) => {
  return request({
    url: `/client/customer/check-phone`,
    method: "POST",
    data: {
      phoneNumber,
      phoneCode,
      code,
    },
  });
};

4.5 状态管理 (stores/modules/login.js)

import { defineStore } from "pinia";
import { ref } from "vue";

export const useLoginStore = defineStore("login", () => {
  // 存储 token
  const token = ref("");
  const setToken = (value) => {
    token.value = value;
  };

  // 存储用户信息
  const userInfo = ref({});
  const setUserInfo = (value) => {
    userInfo.value = value;
  };

  // 存储微信登录 code
  const wechatLoginCode = ref("");
  const setWechatLoginCode = (value) => {
    wechatLoginCode.value = value;
  };

  // 存储手机号（用于二次授权）
  const phone = ref("");
  const setPhone = (value) => {
    phone.value = value;
  };

  return {
    token,
    setToken,
    userInfo,
    setUserInfo,
    wechatLoginCode,
    setWechatLoginCode,
    phone,
    setPhone,
  };
}, { persist: true }); // 持久化存储

4.6 路由守卫配置 (router/index.js)

import { createRouter, createWebHistory } from "vue-router";
import { useLoginStore } from "@/stores/modules/login";

const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("../views/Login/index.vue"),
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../views/Home/index.vue"),
    meta: { requiresAuth: true }, // 需要登录
  },
  {
    path: "/callback",
    name: "callback",
    component: () => import("../views/callback/index.vue"),
  },
  {
    path: "/weChat",
    name: "weChat",
    component: () => import("../views/weChat/index.vue"),
  },
  {
    path: "/mobilePhone",
    name: "mobilePhone",
    component: () => import("../views/mobilePhone/index.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const loginStore = useLoginStore();
  const token = loginStore.token;

  // 需要登录的页面
  if (to.meta.requiresAuth) {
    if (!token) {
      console.log('用户未登录，重定向到登录页面');
      next('/login');
      return;
    }
  }

  // 已登录用户访问登录页，重定向到首页
  if (to.path === '/login' && token) {
    console.log('用户已登录，重定向到首页');
    next('/');
    return;
  }
  next();
});

export default router;

总结

本文详细介绍了 PC 端微信扫码授权登录的完整实现方案，包括：

1. 完整的业务流程: 涵盖手机号登录、微信直接登录、二次授权三种场景
2. 详细的代码实现: 从初始化到回调处理的每个环节
3. 丰富的技术细节: 状态管理、路由守卫、样式定制等
4. 实用的优化方案: 用户体验、性能、安全性多方面考虑
5. 常见问题解决: 总结实际开发中遇到的坑和解决方案

这套方案已在生产环境稳定运行，具有很好的参考价值。