如何在Quasar的boot文件中正确使用vue3-google-oauth？

1. 修复boot文件（googleoauth.js） #

你原boot文件里的变量赋值逻辑有误，且无需导出app实例，插件挂载后会自动注入全局属性。修改后的代码：

import { boot } from 'quasar/wrappers';
import GAuth from 'vue3-google-oauth2';

export default boot(({ app }) => {
  const gAuthOption = {
    clientId: '835170725866-nt6qibip4tb7jafav2k20j83ipso67mo.apps.googleusercontent.com',
    scope: 'profile email',
    prompt: 'select_account',
  };
  app.use(GAuth, gAuthOption);
});

2. 组件内正确调用登录方法 #

方式一：使用组合式函数（推荐） #

vue3-google-oauth2支持组合式API，直接导入调用更符合Vue3规范：

<script setup>
import { useGAuth } from 'vue3-google-oauth2';

const gAuth = useGAuth();

const handleGoogleSignIn = async () => {
  try {
    const response = await gAuth.signIn();
    console.log('登录成功', response);
    // 后续处理用户信息逻辑
  } catch (error) {
    console.error('登录失败', error);
  }
};
</script>

<template>
  <button @click="handleGoogleSignIn">Google登录</button>
</template>

方式二：访问全局属性 #

若需通过全局属性调用，需确保组件挂载后再执行，避免初始化时机问题：

<script setup>
import { getCurrentInstance, onMounted } from 'vue';

let $gAuth;

onMounted(() => {
  const instance = getCurrentInstance();
  $gAuth = instance?.appContext.config.globalProperties.$gAuth;
});

const handleGoogleSignIn = async () => {
  if (!$gAuth) return;
  try {
    const success = await $gAuth.signIn();
    if (success) {
      const userInfo = await $gAuth.getUserInfo();
      console.log('用户信息', userInfo);
    } else {
      console.error('登录未成功');
    }
  } catch (err) {
    console.error('登录出错', err);
  }
};
</script>

<template>
  <button @click="handleGoogleSignIn">Google登录</button>
</template>

3. 关键检查项 #

• 确认Google Cloud控制台中，已配置正确的授权重定向URI：开发环境通常为http://localhost:8080（根据实际端口调整），生产环境需匹配你的域名。
• 核对clientId无复制错误。
• 确保网络可正常访问Google OAuth服务（国内环境需配置代理）。

内容的提问来源于stack exchange，提问作者Daniel Baek