在 Vue 3 中如何实现微信扫码登录？

在 Vue 3 中实现微信扫码登录，涉及到前端生成二维码、监听微信回调以及与后端的交互。以下是一个详细的实现步骤和代码示例：

步骤 1: 准备工作

• 注册微信开放平台应用，获取 AppID 和 AppSecret。
• 配置微信开放平台中的回调 URL。

步骤 2: 安装必要的依赖

• 安装 qrcode 库用于生成二维码。
• 安装 axios 或其他 HTTP 客户端库用于与后端通信。

bash
​
npm install qrcode axios

步骤 3: 编写组件代码

创建一个 Vue 3 组件，用于显示二维码和处理登录逻辑。

vue<template>
  <div v-if="!isAuthenticated">
    <h2>请使用微信扫码登录</h2>
    <div id="qrcode"></div>
  </div>
</template>
​
<script setup>
import { ref, onMounted } from 'vue';
import QRCode from 'qrcode';
import axios from 'axios';
​
const isAuthenticated = ref(false);
​
// 生成微信登录的二维码
const generateQRCode = async () => {
  const loginUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
  await QRCode.toElement(document.getElementById('qrcode'), { text: loginUrl, width: 256 });
};
​
// 处理微信登录回调
const handleLoginCallback = async (code) => {
  try {
    const response = await axios.post('/api/login/wechat', { code });
    if (response.data && response.data.token) {
      localStorage.setItem('token', response.data.token);
      isAuthenticated.value = true;
    }
  } catch (error) {
    console.error('Error during WeChat login:', error);
  }
};
​
// 初始化
onMounted(() => {
  generateQRCode();
  // 监听 URL 中的 code 参数
  if (window.location.hash.includes('code=')) {
    const code = window.location.hash.split('code=')[1].split('&')[0];
    handleLoginCallback(code);
  }
});
​
// 从环境变量或配置文件中获取 AppID 和 Redirect URI
const appId = process.env.VUE_APP_WECHAT_APPID;
const redirectUri = process.env.VUE_APP_WECHAT_REDIRECT_URI;
</script>

步骤 4: 后端处理

后端需要接收前端传递的 code，并使用它来调用微信的 API 获取 access_token 和 openid。然后根据 openid 查询或创建用户，并返回一个 token 给前端。

注意事项

• 确保你的 redirect_uri 在微信开放平台中已经正确配置。
• 使用 HTTPS 协议，因为微信要求回调 URL 必须是 HTTPS。
• 代码中的 appId 和 redirectUri 应该从环境变量或配置文件中读取，避免硬编码。

以上代码示例展示了如何在 Vue 3 中生成微信登录的二维码，并处理登录后的回调。你需要根据你的具体需求调整代码，例如错误处理、样式调整以及与你的后端服务的集成。