Electron项目中CommonJS导入electron-store报错及token获取问题求助

1. 修复electron-store的ESM导入错误 #

electron-store从v8版本起改为纯ESM模块，无法再用require()导入，必须使用动态import()。由于主进程是CommonJS环境，需在app.on('ready')事件中异步导入：

let store;

app.on('ready', async () => {
  // 动态导入electron-store
  const { default: Store } = await import('electron-store');
  store = new Store();

  // 登录判断逻辑
  const token = store.get('token');
  if (token) {
    createLoginWindow(false);
    createMainWindow();
  } else {
    createLoadingWindow(true);
    createLoginWindow();
    console.log("Token is Null");
  }
});

2. 解决主进程无法访问localStorage的问题 #

localStorage是渲染进程专属API，主进程直接调用会报错。若你的token是在渲染进程通过localStorage.setItem('token', data.token)存储的，需通过Preload脚本桥接同步到主进程：

步骤1：修改Preload脚本 #

在preload.js中添加代码，实现主进程与渲染进程的token同步：

// preload.js
const { contextBridge } = require('electron');
const Store = require('electron-store');
const store = new Store();

contextBridge.exposeInMainWorld('electronAPI', {
  // 同步token到electron-store和localStorage
  saveToken: (token) => {
    store.set('token', token);
    localStorage.setItem('token', token);
  },
  // 从electron-store读取token
  getToken: () => store.get('token')
});

步骤2：修正主进程activate事件逻辑 #

原代码中直接调用localStorage.getItem('token')是错误的，改为从electron-store读取：

app.on('activate', async () => {
  // 若store未初始化，先动态导入
  if (!store) {
    const { default: Store } = await import('electron-store');
    store = new Store();
  }
  const token = store.get('token');
  if (BrowserWindow.getAllWindows().length === 0) {
    if (!token) {
      console.log("Token is Null");
      createLoadingWindow(true);
      createLoginWindow();
    } else {
      createMainWindow();
    }
  }
});

完整修正后的main.js代码 #

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;
let store;

function createMainWindow() {
    mainWindow = new BrowserWindow({
        width: 300,
        height: 400,
        frame: false,
        show: true,
        transparent: false,
        resizable: false,
        fullscreenable: false,
        titleBarStyle: 'customButtonsOnHover',
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true,
            enableRemoteModule: false,
            nodeIntegration: false
        },
        icon: path.join(__dirname, 'icon.png')
    });

    mainWindow.loadFile('html/loading.html');
}

// 请确保已定义以下窗口创建函数
function createLoginWindow(show = true) {
    // 登录窗口创建逻辑
}

function createLoadingWindow(show = true) {
    // 加载窗口创建逻辑
}

app.on('ready', async () => {
    const { default: Store } = await import('electron-store');
    store = new Store();

    const token = store.get('token');
    if (token) {
        createLoginWindow(false);
        createMainWindow();
    } else {
        createLoadingWindow(true);
        createLoginWindow();
        console.log("Token is Null");
    }
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', async () => {
    if (!store) {
        const { default: Store } = await import('electron-store');
        store = new Store();
    }
    const token = store.get('token');
    if (BrowserWindow.getAllWindows().length === 0) {
        if (!token) {
            console.log("Token is Null");
            createLoadingWindow(true);
            createLoginWindow();
        } else {
            createMainWindow();
        }
    }
});

额外注意事项 #

• 若遇到ESM兼容问题，可降级electron-store到v7版本（npm install electron-store@7），该版本支持CommonJS的require导入。
• 始终通过Preload脚本实现主进程与渲染进程的通信，不要关闭contextIsolation，这是Electron安全最佳实践。

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