Vue3中實現(xiàn)微信掃碼登錄的步驟和代碼示例

更新時間：2024年07月16日 08:48:48 作者：廣島原子

在 Vue 3 中實現(xiàn)微信掃碼登錄,涉及到前端生成二維碼、監(jiān)聽微信回調(diào)以及與后端的交互,本文給大家介紹了一個詳細的實現(xiàn)步驟和代碼示例,對大家的學習或工作有一定的幫助,需要的朋友可以參考下

實現(xiàn)步驟

步驟 1: 準備工作

注冊微信開放平臺應用，獲取 AppID 和 AppSecret。
配置微信開放平臺中的回調(diào) URL。

步驟 2: 安裝必要的依賴

安裝 qrcode 庫用于生成二維碼。
安裝 axios 或其他 HTTP 客戶端庫用于與后端通信。

bash
npm install qrcode axios

步驟 3: 編寫組件代碼

創(chuàng)建一個 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 });
};
?
// 處理微信登錄回調(diào)
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>