bash
npm install qrcode axios

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();
  // 監(jiān)聽 URL 中的 code 參數(shù)
  if (window.location.hash.includes('code=')) {
    const code = window.location.hash.split('code=')[1].split('&')[0];
    handleLoginCallback(code);
  }
});
?
// 從環(huán)境變量或配置文件中獲取 AppID 和 Redirect URI
const appId = process.env.VUE_APP_WECHAT_APPID;
const redirectUri = process.env.VUE_APP_WECHAT_REDIRECT_URI;
</script>