Quasar+Electron集成OAuth2遇require未定义错误求助

你直接在渲染进程（Vue组件）中导入了主进程专用的oauth.js文件，而Quasar+Electron默认在渲染进程中禁用了Node.js集成（nodeIntegration: false），导致require无法被识别，从而抛出ReferenceError: require is not defined错误。

主进程（负责Electron原生API，比如BrowserWindow）和渲染进程（Vue组件运行环境）是完全隔离的，不能直接交叉导入代码。

1. 迁移OAuth逻辑到主进程 #

将OAuth认证逻辑放在主进程中，通过Electron的IPC（进程间通信）让渲染进程触发认证操作。

修改主进程文件（src-electron/electron-main.js） #

const { app, BrowserWindow, ipcMain } = require('electron')
const { google } = require('googleapis')
const path = require('path')

const CLIENT_ID = 'your_client_id'
const CLIENT_SECRET = 'your_client_secret'
const REDIRECT_URI = 'http://localhost:8000/auth/google/callback'

const oauth2Client = new google.auth.OAuth2(
  CLIENT_ID,
  CLIENT_SECRET,
  REDIRECT_URI
)

// 注册IPC监听，处理渲染进程的认证请求
ipcMain.handle('auth:google', async () => {
  return new Promise((resolve, reject) => {
    try {
      const authUrl = oauth2Client.generateAuthUrl({
        access_type: 'offline',
        scope: ['https://www.googleapis.com/auth/gmail.readonly']
      })

      const authWindow = new BrowserWindow({
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
          nodeIntegration: false,
          contextIsolation: true // 保持安全配置
        }
      })

      authWindow.loadURL(authUrl)
      authWindow.show()

      // 处理授权跳转
      authWindow.webContents.on('did-redirect-navigation', async (event, redirectUrl) => {
        if (redirectUrl.startsWith(REDIRECT_URI)) {
          event.preventDefault()
          const code = new URL(redirectUrl).searchParams.get('code')
          const { tokens } = await oauth2Client.getToken(code)
          oauth2Client.setCredentials(tokens)

          // 调用Gmail API示例
          const gmail = google.gmail({ version: 'v1', auth: oauth2Client })
          const messages = await gmail.users.messages.list({ userId: 'me' })

          authWindow.close()
          resolve({ tokens, messages })
        }
      })

      // 处理窗口关闭的情况
      authWindow.on('closed', () => {
        reject(new Error('认证窗口已关闭'))
      })
    } catch (err) {
      reject(err)
    }
  })
})

// 主窗口创建逻辑（保留你原有代码）
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 配置预加载脚本
    }
  })

  mainWindow.loadURL(process.env.APP_URL)
}

app.whenReady().then(createWindow)

// 其他主进程生命周期代码（保留原有）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

2. 创建预加载脚本（src-electron/preload.js） #

由于开启了contextIsolation，渲染进程无法直接访问Electron API，需要通过预加载脚本暴露安全的通信接口：

const { contextBridge, ipcRenderer } = require('electron')

// 向渲染进程暴露API
contextBridge.exposeInMainWorld('electronAPI', {
  googleAuth: () => ipcRenderer.invoke('auth:google')
})

3. 修改Vue组件（src/pages/Connect.vue） #

通过预加载脚本暴露的API触发认证：

<template>
  <button @click="login">登录Google账号</button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ConnectPage',
  methods: {
    async login () {
      try {
        const result = await window.electronAPI.googleAuth()
        console.log('认证成功，Token信息:', result.tokens)
        console.log('邮件列表:', result.messages)
      } catch (error) {
        console.error('认证失败:', error)
      }
    }
  }
})
</script>

4. 确认Quasar配置（quasar.config.js） #

确保Electron部分的配置正确开启了预加载脚本：

module.exports = configure(function (ctx) {
  return {
    // 其他配置...
    electron: {
      bundler: 'packager',
      packager: {
        // 打包配置...
      },
      // 确保预加载脚本路径正确
      preloadScripts: ['src-electron/preload.js'],
      nodeIntegration: false,
      contextIsolation: true
    }
  }
})

• 确保googleapis包已安装：执行npm install googleapis或yarn add googleapis
• 验证Google开发者控制台的REDIRECT_URI配置和代码中一致
• 主进程中的所有Electron API调用必须严格限制在主进程环境，避免在渲染进程中直接操作原生API

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