如何在Electron应用启动间保留FileSystem API的目录访问权限？

问题背景 #

将SPA迁移到Electron后，使用FileSystem API存储用户数据，通过IndexedDB保存目录句柄并尝试自动恢复权限时，每次启动都会报错：

SecurityError: 无法在'FileSystemHandle'上执行'requestPermission'：请求权限需要用户激活。

点击重试按钮（带用户手势）即可正常恢复权限，说明句柄存储正常，但Electron默认要求用户交互才能授予权限。以下是几种无需用户手势就能自动恢复权限的方案：

方案一：主进程自动批准权限请求 #

在Electron主进程中，通过session.setPermissionRequestHandler监听权限请求，自动批准文件系统相关权限，绕过用户手势限制：

// 主进程代码
const { app, session } = require('electron');

app.whenReady().then(() => {
  // 全局处理权限请求
  session.defaultSession.setPermissionRequestHandler((webContents, permission, callback) => {
    // 自动批准文件系统读写权限
    const allowedPermissions = ['fileSystem', 'fileSystem.read', 'fileSystem.write'];
    if (allowedPermissions.includes(permission)) {
      callback(true); // 同意权限请求
    } else {
      callback(false); // 其他权限拒绝或按需求处理
    }
  });

  // 初始化窗口逻辑...
});

配置后，渲染进程调用requestPermission时会自动获得权限，无需用户点击交互。

方案二：存储目录路径，主进程中转获取句柄 #

FileSystemHandle的权限在Electron重启后可能失效，更可靠的方式是存储目录路径到本地配置，启动时由主进程直接获取句柄并传递给渲染进程：

1. 主进程实现（存储路径+传递句柄） #

// 主进程代码
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const fs = require('fs');
const path = require('path');

// 配置文件路径（存在Electron的userData目录）
const configFilePath = path.join(app.getPath('userData'), 'app-config.json');

// 读取本地配置
function loadConfig() {
  try {
    return JSON.parse(fs.readFileSync(configFilePath, 'utf8'));
  } catch (err) {
    return { dataDir: '' };
  }
}

// 保存目录路径到配置
function saveDataDir(dirPath) {
  const config = loadConfig();
  config.dataDir = dirPath;
  fs.writeFileSync(configFilePath, JSON.stringify(config, null, 2));
}

// 处理渲染进程的目录选择请求
ipcMain.handle('pick-data-dir', async () => {
  const { canceled, filePaths } = await dialog.showOpenDialog({
    properties: ['openDirectory']
  });
  if (!canceled) {
    const dirPath = filePaths[0];
    saveDataDir(dirPath);
    // 获取目录句柄并返回给渲染进程
    return await getDirHandle(dirPath);
  }
  return null;
});

// 主进程直接获取目录句柄（无需用户手势）
async function getDirHandle(dirPath) {
  const mainWindow = BrowserWindow.getFocusedWindow();
  return await mainWindow.webContents.executeJavaScript(`
    await window.showDirectoryPicker({ startIn: "${dirPath.replace(/\\/g, '\\\\')}" });
  `);
}

// 应用启动时传递已保存的目录句柄
app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 需配置preload暴露IPC接口
    }
  });

  mainWindow.webContents.on('did-finish-load', async () => {
    const config = loadConfig();
    if (config.dataDir) {
      try {
        const dirHandle = await getDirHandle(config.dataDir);
        mainWindow.webContents.send('ready-dir-handle', dirHandle);
      } catch (err) {
        console.error('自动获取目录句柄失败:', err);
      }
    }
  });
});

2. 渲染进程接收句柄 #

// 渲染进程代码
const { ipcRenderer } = require('electron');

// 监听主进程传递的目录句柄
ipcRenderer.on('ready-dir-handle', (_, dirHandle) => {
  // 开始使用目录句柄读写数据
  initAppWithDirHandle(dirHandle);
});

// 用户手动选择目录时触发
async function pickDirManually() {
  const dirHandle = await ipcRenderer.invoke('pick-data-dir');
  if (dirHandle) {
    initAppWithDirHandle(dirHandle);
  }
}

方案三：配置WebPreferences权限策略 #

创建窗口时，通过permissionsPolicy直接允许文件系统权限，配合方案一使用效果更佳：

// 主进程代码
const mainWindow = new BrowserWindow({
  webPreferences: {
    permissionsPolicy: {
      "file-system": "self" // 允许当前应用访问文件系统
    },
    contextIsolation: true
  }
});

关键注意事项 #

• 优先选择方案二：存储目录路径比FileSystemHandle更稳定，避免句柄权限过期问题。
• 主进程拥有更高的系统权限，无需用户手势即可直接操作文件系统，通过IPC中转是Electron生态的常规做法。
• 若坚持使用IndexedDB存储句柄，必须配合方案一的权限自动批准逻辑，才能绕过用户手势限制。

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