PC 端微信扫码登录实现教程（Java + Vue 2）-平芜编程栈

在 PC 端实现微信扫码登录时，用户用手机微信扫码后，PC 端要能自动登录。本文整理了完整流程，包括前端、后端实现和流程图。

一、核心流程概览

PC 扫码登录本质是通过唯一 sessionId（state）绑定一次扫码会话。流程如下：

PC端 /wechat/login 页面 ↓ 显示二维码 + sessionId 手机微信扫码二维码 ↓ 微信官方授权页面（无需前端实现） ↓ 用户确认授权 微信回调后端 /wechat/callback ↓ 后端用 code 换取 access_token + openid ↓ 后端生成系统 token，并更新 sessionId 状态为 success PC端轮询 /api/wechat/qr/status?sessionId=xxx ↓ 获取 token ↓ 保存 token → 登录成功 → 跳转首页

🔑 要点：

sessionId：每次生成二维码唯一标识扫码会话
手机授权页面：微信官方提供，前端无需处理
PC 端通过轮询或 WebSocket 查询授权状态

二、前端实现（Vue 2）

1️⃣ 二维码显示页面

WechatLogin.vue：

<template> <div class="wechat-login"> <h2>微信扫码登录</h2> <div v-if="qrUrl"> <p>请使用微信扫码登录</p> <img :src="qrUrl" alt="微信扫码登录二维码" /> </div> <div v-else> <p>二维码生成中...</p> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { qrUrl: '', }; }, mounted() { this.fetchQrCode(); }, methods: { async fetchQrCode() { try { const res = await axios.get('/api/wechat/qr'); this.qrUrl = res.data.qrUrl; // 获取二维码 URL 中的 sessionId const sessionId = new URL(this.qrUrl).searchParams.get('state'); this.startPolling(sessionId); } catch (err) { console.error('生成二维码失败', err); } }, startPolling(sessionId) { const interval = setInterval(async () => { const res = await axios.get(`/api/wechat/qr/status?sessionId=${sessionId}`); if (res.data.status === 'success') { clearInterval(interval); localStorage.setItem('token', res.data.token); window.location.href = '/'; } else if (res.data.status === 'failed' || res.data.status === 'expired') { clearInterval(interval); alert('扫码登录失败或二维码过期，请重新扫码'); } }, 2000); } } }; </script> <style scoped> .wechat-login { text-align: center; padding: 50px; } .wechat-login img { width: 250px; height: 250px; } </style>

前端说明：

/api/wechat/qr返回二维码 URL
轮询/api/wechat/qr/status?sessionId=xxx获取授权结果

三、后端实现（Java + Spring Boot）

1️⃣ 数据结构

import java.time.LocalDateTime; public class WechatLoginSession { private String sessionId; private String status; // pending / success / failed private String token; private LocalDateTime expireTime; // getter / setter }

用内存 Map保存会话（生产环境可用 Redis）

import java.util.concurrent.ConcurrentHashMap; public class WechatSessionStore { public static final ConcurrentHashMap<String, WechatLoginSession> sessionMap = new ConcurrentHashMap<>(); }

2️⃣ 生成二维码 URL

@GetMapping("/api/wechat/qr") public Map<String, String> getQrCode() throws Exception { String sessionId = UUID.randomUUID().toString(); WechatLoginSession session = new WechatLoginSession(); session.setSessionId(sessionId); session.setStatus("pending"); session.setExpireTime(LocalDateTime.now().plusMinutes(5)); WechatSessionStore.sessionMap.put(sessionId, session); String redirectUriEncoded = URLEncoder.encode("https://yourdomain.com/api/wechat/callback", "UTF-8"); String qrUrl = "https://open.weixin.qq.com/connect/qrconnect?" + "appid=" + APPID + "&redirect_uri=" + redirectUriEncoded + "&response_type=code" + "&scope=snsapi_login" + "&state=" + sessionId + "#wechat_redirect"; return Collections.singletonMap("qrUrl", qrUrl); }

3️⃣ 微信回调处理

@GetMapping("/api/wechat/callback") public String callback(@RequestParam String code, @RequestParam String state) { WechatLoginSession session = WechatSessionStore.sessionMap.get(state); if (session == null) { return "登录会话不存在或已过期"; } try { // 用 code 换取 access_token + openid RestTemplate restTemplate = new RestTemplate(); String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" + "appid=" + APPID + "&secret=" + APPSECRET + "&code=" + code + "&grant_type=authorization_code"; Map<String, Object> tokenResp = restTemplate.getForObject(url, Map.class); String openid = (String) tokenResp.get("openid"); // 生成系统 token String systemToken = "token-" + openid + "-" + System.currentTimeMillis(); session.setStatus("success"); session.setToken(systemToken); return "授权成功，请返回 PC 页面"; } catch (Exception e) { e.printStackTrace(); session.setStatus("failed"); return "授权失败"; } }

4️⃣ PC 端轮询接口

@GetMapping("/api/wechat/qr/status") public Map<String, Object> checkQrStatus(@RequestParam String sessionId) { WechatLoginSession session = WechatSessionStore.sessionMap.get(sessionId); if (session == null) { return Map.of("status", "expired"); } if ("success".equals(session.getStatus())) { String token = session.getToken(); WechatSessionStore.sessionMap.remove(sessionId); // 可选移除 return Map.of("status", "success", "token", token); } if ("failed".equals(session.getStatus())) { return Map.of("status", "failed"); } return Map.of("status", "pending"); }

四、流程图

flowchart TD A[PC端请求 /wechat/login] --> B[后端生成二维码 + sessionId] B --> C[前端显示二维码] D[用户用手机扫码] --> E[微信授权页面（微信自带）] E --> F[用户确认授权] F --> G[微信回调后端 /wechat/callback] G --> H[后端换取 access_token + openid] H --> I[后端生成系统 token，更新 sessionId 状态] C --> J[PC端轮询 /api/wechat/qr/status?sessionId=xxx] J -->|status=success| K[PC端保存 token，登录成功]